基于vue 实现token验证的实例代码
发布时间：2020-12-17 02:40:37 所属栏目：百科 来源：网络整理
导读：vue-koa2-token 基于vue的 做了token验证 前端部分（对axios设置Authorization） { //每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器 if(store.state.token){ config.headers.Authorization = `token ${store.state.token}`; } return
|
vue-koa2-token 基于vue的 做了token验证 前端部分（对axios设置Authorization） {
//每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器
if(store.state.token){
config.headers.Authorization = `token ${store.state.token}`;
}
return config;
},err => {
return Promise.reject(err);
}
);
//respone拦截器
instance.interceptors.response.use(
response => {
return response;
},error => { //默认除了2XX之外的都是错误的，就会走这里
if(error.response){
switch(error.response.status){
case 401:
store.dispatch('UserLogout'); //可能是token过期，清除它
router.replace({ //跳转到登录页面
path: 'login',query: { redirect: router.currentRoute.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
});
}
}
return Promise.reject(error.response);
}
);
export default instance;
然后在路由文件中 {
//获取store里面的token
let token = store.state.token;
//判断要去的路由有没有requiresAuth
if(to.meta.requiresAuth){
if(token){
next();
}else{
next({
path: '/login',query: { redirect: to.fullPath } // 将刚刚要去的路由path（却无权限）作为参数，方便登录成功后直接跳转到该路由
});
}
}else{
next();//如果无需token,那么随它去吧
}
});
后端(node) 我们封装了一个中间件 在需要验证token的路由，加上这个中间件 1、使用jsonwebtoken 创建token2、对于前端的请求，校验接口 {
if(ctx.request.header['authorization']){
let token = ctx.request.header['authorization'].split(' ')[1];
//解码token
let decoded = jwt.decode(token,'sinner77');
//console.log(decoded);的输出 ：{ user_id: '123123123',iat: 1494405235,exp: 1494405235 }
if(token && decoded.exp <= new Date()/1000){
ctx.status = 401;
ctx.body = {
message: 'token过期'
};
}else{
//如果权限没问题，那么交个下一个控制器处理
return next();
}
}else{
ctx.status = 401;
ctx.body = {
message: '没有token'
}
}
};
代码托管github 欢迎star https://github.com/yxl720/vue-koa2-token 总结以上所述是小编给大家介绍的基于vue 实现token验证的实例代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |