Ant Design Pro 学习 (2) - 实现登录功能

1. 前言

我的计划是一点点修改需要用到的代码，其余的尽量先不动，免得在一开始就陷入调试代码的灾难中。

2. 正文

项目自带的登录API定义在src\services\ant-design-pro\api.ts中，我这里在services下新建了一个目录user，并添加api.ts文件，实现登入、登出和获取用户信息的功能，其中代码如下。

api.ts

// @ts-ignore
/* eslint-disable */
import { request } from '@umijs/max';

/** 登录接口 POST /api/user/login */
export async function login(body: API.LoginParams, options?: { [key: string]: any }) {
  return request<API.LoginResult>('/api/user/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

/** 退出登录接口 POST /api/user/logout */
export async function logout(options?: { [key: string]: any }) {
  return request<Record<string, any>>('/api/user/logout', {
    method: 'POST',
    ...(options || {}),
  });
}

/** 获取当前的用户 GET /api/user */
export async function currentUser(options?: { [key: string]: any }) {
  return request<{
    data: API.CurrentNovelUser;
  }>(`/api/user`, {
    method: 'GET',
    ...(options || {}),
  });
}

修改src\pages\User\Login\index.tsx，从自定义的api中获取登录方法。

导入login

import { login } from '@/services/user/api';

新建工具方法src\utils\cryptographyHelper.ts，提供MD5加密功能。

MD5

import { Md5 } from 'ts-md5';

export default function createMd5(content: string) {
  return Md5.hashStr(content);
}

在提交密码之前，先和密码盐一起做MD5加密。

这里为了方便演示，硬写了一个密码盐，实际上应该从后台获取，这个值和数据库里是一样的。

加密密码

//其他代码

const handleSubmit = async (values: API.LoginParams) => {
    try {
      // md5
      const salt = 'qwe123!@#';
      const passwordHash = createMd5(`${values.password}${salt}`);
      values.password = passwordHash;

      // 登录
      const msg = await login({ ...values, type });
      if (msg.status === 'success') {
        const defaultLoginSuccessMessage = intl.formatMessage({
          id: 'pages.login.success',
          defaultMessage: '登录成功！',
        });
        message.success(defaultLoginSuccessMessage);
        await fetchUserInfo();
        const urlParams = new URL(window.location.href).searchParams;
        history.push(urlParams.get('redirect') || '/');
        return;
      }
//其他代码  

3. 访问后台API的权限问题

前后端之间的Jwt Token对前端来说是无感的，全靠Cookie来传递，授权、验证和刷新token都由后台来实现，具体可以查看->用NetCore + ReactJS 实现一个前后端分离的网站 (4) 用户登录与授权。