react项目登录验证功能
原创
再用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 删除。