后台登录-访问数据库登录
基于Ant Design Pro V5和若依后台实现登录、鉴权、单表数据的增删改查、动态菜单和路由等简易管理后台基本功能(JS版本)
·
1.上一节中getInitialState方法中使用了queryCurrentUser获取当前用户信息,但是要能获取当前用户信息的前提是登录成功,并且能获取到token,接下来我们先改造登录方法,实现登录
2.登录组件所在位置 src/pages/user/Login/index.jsx,点解登录按钮的前台代码如下:
const handleSubmit = async (values) => {
try {
// 登录
const msg = await login({ ...values, type });
if (msg.status === 'ok') {
const defaultLoginSuccessMessage = intl.formatMessage({
id: 'pages.login.success',
defaultMessage: '登录成功!',
});
message.success(defaultLoginSuccessMessage);
await fetchUserInfo();
/** 此方法会跳转到 redirect 参数所在的位置 */
if (!history) return;
const { query } = history.location;
const { redirect } = query;
history.push(redirect || '/');
return;
}
console.log(msg); // 如果失败去设置用户错误信息
setUserLoginState(msg);
} catch (error) {
const defaultLoginFailureMessage = intl.formatMessage({
id: 'pages.login.failure',
defaultMessage: '登录失败,请重试!',
});
message.error(defaultLoginFailureMessage);
}
};
3.找到 const msg = await login({ …values, type }); login方法代码所在位置src/services/ant-design-pro/api.js
export async function login(body, options) {
return request('/api/login/account', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: body,
...(options || {}),
});
}
4.我们之前介绍过若依后台的login方法的url位置为/api/login,且后台也是post方法,此处我们只需要把request的请求url改为/api/login即可
5.回到handleSubmit方法,请求后台登录成功后,我们需要获取后台返回的token,并存入到localStorage中,这样请求其他接口时,封装好的requestInterceptors才会在头中加入JWT token,保证接口能顺利访问。
5.handleSubmit方法修改完如下所示
const handleSubmit = async (values) => {
try {
// 登录
const msg = await login({ ...values, type });
console.log("mgs:",msg);
if (msg.code === 200) {
const defaultLoginSuccessMessage = intl.formatMessage({
id: 'pages.login.success',
defaultMessage: '登录成功!',
});
message.success(defaultLoginSuccessMessage);
if(msg.token){
const current = new Date();
const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60);
localStorage.setItem('expireTime', `${expireTime}`);
setAuthority(msg.token, msg.token, expireTime);
}
await fetchUserInfo();
/** 此方法会跳转到 redirect 参数所在的位置 */
if (!history) return;
const { query } = history.location;
const { redirect } = query;
history.push(redirect || '/');
return;
}
console.log(msg); // 如果失败去设置用户错误信息
setUserLoginState(msg);
} catch (error) {
const defaultLoginFailureMessage = intl.formatMessage({
id: 'pages.login.failure',
defaultMessage: '登录失败,请重试!',
});
message.error(defaultLoginFailureMessage);
}
};
主要增加了以下代码
if(msg.token){
const current = new Date();
const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60);
localStorage.setItem('expireTime', `${expireTime}`);
setAuthority(msg.token, msg.token, expireTime);
}
这段代码中我们使用了Token封装工具类,需要在代码中引入该类
import { setAuthority} from '@/utils/authority';
6.handleSubmit 这段代码中使用了获取用户信息的方法await fetchUserInfo(),因为我们从后台获取用户信息的方法尚未实现,所以不急着实现登录效果,下一步先实现获取用户信息的方法。
更多推荐
已为社区贡献4条内容
所有评论(0)