再用react完成项目的过程中通常会开发登录功能,一般有如下两个地方会用到登录功能:
1、登录框界面,此界面一般是完成登录的,前端提交登录信息,后端返回用户token和用户信息,用户信息最少要包含用户名和用户角色信息,讲这些信息存储到本地,一般是localstorage。
由于react是单页应用,本地存储以后,路由切换随时都可以访问到用户信息和token信息。
2、页面刷新,顾名思义,每当页面刷新,整个react应用都需要重新加载,而为了判断当前用户是否是登录状态,一般的前端开发者会判断本地存储中是否有token信息和用户信息,但是这里有个弊端,那就是token过期,该如何解决呢?
我的办法是在入口文件处调用一个验证函数,验证函数有如下几个步骤:
1、验证token是否存在,不存在,直接跳转到登录界面;
2、token存在,向后端验证token是否过期,过期的话直接跳转登录界面;
3、token存在,并且未过期,程序正常执行。
const isLogin = async () => {
console.log('验证是否登录')
const token = store.get('token');
if (!token) return [false, {}];
const result = await vatifyToken(token);
if (!result.success) return [false, {}];
const { userInfo } = result;
return [true, userInfo];
}
在合适的地方调用此函数,便可验证用户登录是否有效。
在做项目时,与第三方打通认证,主要步骤如下:
1、第三方应用跳转到本地应用,地址栏带有code
2、前端获取到code发送到本地服务器,本地服务器根据第三方协议,去验证并获取用户信息,将用户信息和token返回给前端,这一步类似登录,在登录界面用户提交的是用户名和密码换取用户信息和token,而在第三方验证,前端提交的code换取用户信息和token。
const bootStrap = async () => {
const [result, userInfo] = await isLogin();
// 存在token,并且token有效,跳转到首页
console.log("验证token是否存在或者失效",result)
if (result) return history.push('/home');
// 否则判断url中是否存在authercode,
console.log(searchParams);
const { auth_code, code } = searchParams;
const distCode = auth_code||code;
if (!distCode) return history.push('/user/login');
console.log("distCode",distCode)
// return
const verifyCodeResult = await verifyCode(distCode);
console.log(verifyCodeResult);
if (verifyCodeResult.code !== 0) {
Message.error("验证失败")
} else {
Message.success('验证成功');
const {role, token, userName} = verifyCodeResult.data;
Store.set('token', token);
Store.set('userInfo', { userName, role })
Message.success('登录成功');
setAuth({ admin: role === 'admin' });
userDispatchers.update2({ userName, gymId: '7' });
history.push('/home');
}
}
我在这里是先验证了,本地是否有可用的token,如果有,直接使用本地token,省去验证了,如果没有,再用code去换取token。
以上便是react应用中登录鉴权的简单实践,希望对你有所帮助。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。