vue+egg+jwt实现登录验证的示例代码
原理：vue前端登录，提交账号密码给egg后端，后端比对信息后，使用jsonwebtoken对用户信息进行签名生成token，之后通过cookie返回给vue前端，前端需要使用token里的信息就使用js-base64进行token第二段解码即可。
vue前端路由跳转，进入路由前置守卫检测cookie中的token是否存在，不存在(已过期)则跳转登录，否则继续执行，然后在http拦截器里请求时存在token请求头带上token，后端未得到header则返回错误码，得到则用jsonwebtoken进行验证，是时间错误就从新发放token令牌，否则返回错误码，还要及时更新cookie时间，保证登录态.
vue前端main.js中：
importaxiosfrom'axios';
importcookiefrom'./public/util';
router.beforeEach((to,from,next)=>{
console.log('路由拦截')
//判断要去的路由有没有requiresAuth
if(to.meta.requiresAuth){
lettoken=cookie.getCookie('token');
if(token){
next();
}else{
next({
path:'/login'
});
}
}else{
next();//如果无需token,那么随它去吧
}
})
//httprequest拦截器
axios.interceptors.request.use(
config=>{
lettoken=cookie.getCookie('token');
console.log(token)
if(token){//判断是否存在token，如果存在的话，则每个httpheader都加上token
config.headers.authorization=`token${token}`;
}
returnconfig;
},
err=>{
returnPromise.reject(err);
});
//httpresponse拦截器
axios.interceptors.response.use(
response=>{
returnresponse;
},
error=>{
if(error.response){
switch(error.response.status){
case401:
//返回401清除token信息并跳转到登录页面
router.replace({
path:'/login'
});
}
}
returnPromise.reject(error.response.data);//返回接口返回的错误信息
});
Vue.prototype.$http=axios;
其中util.js中我封装了操作cookie的方法
//获取cookie、
functiongetCookie(name){
vararr,reg=newRegExp("(^|)"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return(arr[2]);
else
returnnull;
}
//设置cookie,增加到vue实例方便全局调用
functionsetCookie(c_name,value,expiredays){
varexdate=newDate();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString());
};
//删除cookie
functiondelCookie(name){
varexp=newDate();
exp.setTime(exp.getTime()-1);
varcval=getCookie(name);
if(cval!=null)
document.cookie=name+"="+cval+";expires="+exp.toGMTString();
};
module.exports={
getCookie:getCookie,
setCookie:setCookie,
delCookie:delCookie
}
路由中需要登录才能访问的页面，应：
path:'/admin/manager',component:Page,name:'管理系统首页',meta:{requiresAuth:true}
如果需要获取token中的信息则：
lettoken=cookie.getCookie('token');
letBase64=require('js-base64').Base64;
letstr=token.split('.')[1];
letuser=JSON.parse(Base64.decode(str));
console.log(user)
后端在登录逻辑执行完后，需要给前端发放token
letjwt=require('jsonwebtoken');
lettoken=jwt.sign({
user_id:1,
user_name:'张三'
},'自定义签名盐值',{
expiresIn:'60s'//时间根据自己定，具体可参考jsonwebtoken插件官方说明
});
this.ctx.cookies.set('token',token,{maxAge:60*1000,httpOnly:false,overwrite:true,signed:false})
this.ctx.body=true;
接着是中间件：
module.exports=()=>{
constjwt=require('jsonwebtoken');
returnasyncfunction(ctx,next){
if(ctx.request.header['authorization']){
lettoken=ctx.request.header['authorization'].split('')[1];
console.log(token)
letdecoded;
//解码token
try{
decoded=jwt.verify(token,'加签时定义的盐值');
}catch(error){
if(error.name=='TokenExpiredError'){
console.log('时间到期')
//重新发放令牌
token=jwt.sign({
user_id:1,
user_name:'张三'
},'sinner77',{
expiresIn:'60s'//过期时间设置为60妙。那么decode这个token的时候得到的过期时间为:创建token的时间+设置的值
});
ctx.cookies.set('token',token,{
maxAge:60*1000,
httpOnly:false,
overwrite:true,
signed:false
});
}else{
ctx.status=401;
ctx.body={
message:'token失效'
}
return;
}
}
//重置cookie时间
ctx.cookies.set('token',token,{
maxAge:60*1000,
httpOnly:false,
overwrite:true,
signed:false
});
awaitnext();
}else{
ctx.status=401;
ctx.body={
message:'没有token'
}
return;
}
}
};
最后在需要登录才可访问的资源路由上使用该中间件，如:
constchecktoken=app.middleware.checktoken();
router.get('/test',checktoken,controller.util.test);
至此，以cookie维护登录态，token做登录权限验证就完成了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。