前言
本文主要讨论vue项目中的token认证实现登录功能。涉及到的内容有:Vue3、Vue Router、axios、Vant组件库。
- 文章内容主要实现用户登录时记录验证信息于本地,这样设置用户下次再进入页面时就不用重新登录;
- 设置退出登录的功能,用于清除本地记录的token信息;
- 设置相应拦截,对于需要授权的请求接口,还未授权则统一去登录界面授权;
- 访问需要授权才能访问的页面时,如果没有登录,则跳转到登录界面;
提示:以下是本篇文章正文内容,下面案例可供参考
代码展示
1.登录:
const onSubmit = () => {
//发送登录请求,"Login"为封装的登录请求函数,此处不做过多累述
Login(userinfo).then((res) => {
console.log(res.access_token);
//本地记录验证头信息
window.localStorage.setItem("token", res.access_token);
//使用vuex记录登录状态
store.state.text = true;
// "Toast"是vant组件库的提示框,提示登录成功并0.5s后返回先前界面
Toast.success("登录成功");
setTimeout(() => {
router.go(-1);
}, 500);
});
};
2.退出登录:
const LogOut = ()=>{
//"Logout"为封装的退出登录请求函数
Logout().then(res=>{
console.log(res);
//改变登录状态判断
store.state.text = false;
//清除本地记录的token
window.localStorage.setItem('token','')
})
};
3.网络请求的请求拦截和相应拦截部分部分:
//请求拦截
instance.interceptors.request.use(config => {
// 如果有一个接口需要认证才可以访问,就在这统一设置
const token = window.localStorage.getItem('token');
if (token) {
config.headers.Authorization = 'Bearer ' + token;
}
// 放行
return config;
}, err => {
console.log(err);
})
// 响应拦截
instance.interceptors.response.use(res => {
return res ? res.data : res;
}, err => {
console.log(err);
// 对于需要授权的请求接口,还未授权则统一去登录页面授权
// "401" 即未授权,需要请求要求身份验证
if (err.response.status == '401') {
Toast.fail('请先登录');
router.push({ path: '/login' });
}
// 如果有错误,这里面会去处理,显示错误信息,"Notify"为vant组件库的轻提醒框
Notify(err.response.data.errors[Object.keys(err.response.data.errors)[0]][0])
})
4.路由导航守卫:
router.beforeEach((to, from, next) => {
//访问需要授权的页面时,如果没有登录,则跳转到登录界面
if (to.meta.isAuthRequired && store.state.text === false) {
console.log('未验证,请先登录');
// "Toast"是vant组件库的提示框,提示未登录并跳转至登录状态
Toast.fail('您还没有登录,请先登录');
return next('/login');
} else {
console.log('已验证');
next();
}
})
提示:文章到此结束,本文仅为个人看法,若有不足欢迎各位指出。