前言
本文主要讨论vue项目中的token认证实现登录功能。涉及到的内容有:Vue3、Vue Router、axios、Vant组件库。
1、Vue3官方文档 2、Vue Router 3、Vant组件库
- 文章内容主要实现用户登录时记录验证信息于本地,这样设置用户下次再进入页面时就不用重新登录;
- 设置退出登录的功能,用于清除本地记录的token信息;
- 设置相应拦截,对于需要授权的请求接口,还未授权则统一去登录界面授权;
- 访问需要授权才能访问的页面时,如果没有登录,则跳转到登录界面;
提示:以下是本篇文章正文内容,下面案例可供参考
代码展示
1.登录:
const onSubmit = () => {
Login(userinfo).then((res) => {
console.log(res.access_token);
window.localStorage.setItem("token", res.access_token);
store.state.text = true;
Toast.success("登录成功");
setTimeout(() => {
router.go(-1);
}, 500);
});
};
2.退出登录:
const LogOut = ()=>{
Logout().then(res=>{
console.log(res);
store.state.text = false;
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);
if (err.response.status == '401') {
Toast.fail('请先登录');
router.push({ path: '/login' });
}
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.fail('您还没有登录,请先登录');
return next('/login');
} else {
console.log('已验证');
next();
}
})
提示:文章到此结束,本文仅为个人看法,若有不足欢迎各位指出。
|