怎么在vue中使用egg和jwt实现一个登录验证功能
作者
怎么在vue中使用egg和jwt实现一个登录验证功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
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);
看完上述内容,你们掌握怎么在vue中使用egg和jwt实现一个登录验证功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注恰卡编程网行业资讯频道,感谢各位的阅读!
目录
推荐阅读
-
vue表格组件教程学习(vue proxytable只能在开发环境跨域吗)
vueproxytable只能在开发环境跨域吗?跨域问题来源于JavaScript的同源策略,即只有协议主机名端口号(如...
-
Vue组件的自定义事件和全局事件总线怎么使用
-
vue中消息订阅与发布如何使用
vue中消息订阅与发布如何使用这篇文章主要介绍“vue中消息订阅与...
-
Vue显示图片的方式有哪些
-
vue引入静态jquery报错如何解决
vue引入静态jquery报错如何解决这篇文章主要介绍“vue引入...
-
vue-cropper怎么实现裁剪图片
-
怎么用Vue+NodeJS实现大文件上传
-
Vue如何实现简易跑马灯效果
-
Vue怎么指定不编译的文件夹和favicon.ico
Vue怎么指定不编译的文件夹和favicon.ico这篇文章主要介...
-
Vue中的插槽怎么使用
0 条评论
本站已关闭游客评论,请登录或者注册后再评论吧~