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) 用户登录与授权。
标签：const,登录,Pro,ts,Ant,api,Design,user,login From： https://www.cnblogs.com/wang-yi-yi/p/16944070.html