基于vue实现令牌验证的实例代码

　　

vue-koa2-token 　　

基于vue的做了令牌验证

　　

前端部分(对axios设置授权)

　　 　　 　　从“axios”进口axios 　　从“. ./商店”进口商店 　　从“. ./路由器”进口路由器//设置全局axios默认值 　　axios.defaults.timeout=6000;//6000的超时验证 　　axios.defaults.headers.post [' - type ']=癮pplication/json; charset=utf - 8”;//创建一个axios实例 　　const实例=axios.create (); 　　instance.defaults.headers.post [' - type ']=癮pplication/json; charset=utf - 8”; 　　axios.interceptors.request.use=instance.interceptors.request.use;//请求拦截器 　　instance.interceptors.request.use ( 　　配置=比;{//每次发送请求之前检测都vuex存有令牌,那么都要放在请求头发送给服务器 　　如果(store.state.token) { 　　config.headers。授权='牌$ {store.state.token} '; 　　} 　　返回配置; 　　}, 　　呃=比;{ 　　返回Promise.reject (err); 　　} 　　);//响应拦截器 　　instance.interceptors.response.use ( 　　响应=比;{ 　　返回响应; 　　}, 　　错误=比;{//默认除了2 xx之外的都是错误的,就会走这里 　　如果(error.response) { 　　开关(error.response.status) { 　　401年情况: 　　store.dispatch (“UserLogout”);//可能是令牌过期,清除它 　　路由器。替换({//跳转到登录页面 　　路径:“登录”, 　　查询:{重定向:router.currentRoute。fullPath}//将跳转的路由路径作为参数,登录成功后跳转到该路由 　　})； 　　} 　　} 　　返回Promise.reject (error.response); 　　} 　　); 　　出口默认实例; 　　 　　

,然后在路由文件中

　　 　　//注册全局钩子用来拦截导航 　　路由器。beforeEach(下),从=比;{//获取商店里面的令牌 　　让牌=store.state.token;//判断要去的路由有没有requiresAuth 　　如果(to.meta.requiresAuth) { 　　如果(令牌){ 　　next (); 　　其他}{ 　　下一个({ 　　路径:/登录, 　　查询:{重定向:。fullPath}//将刚刚要去的路由路径(却无权限)作为参数,方便登录成功后直接跳转到该路由 　　})； 　　} 　　其他}{ 　　next();//如果无需令牌,那么随它去吧 　　} 　　}); 　　 　　

后端(节点)我们封装了一个中间件在需要验证令牌的路,由加上这个中间件

　　 　　 　　router.get('/钱',checkToken User.dosh) 　　const jwt=要求(“jsonwebtoken”); 　　 　　

<强> 1,使用jsonwebtoken创建牌

　　 　　 　　const jwt=要求(“jsonwebtoken”);//登录时:核对用户名和密码成功后,应用将用户的id(图中的user_id)作为JWT负载的一个属性 　　模块。出口=函数(user_id) { 　　const牌=jwt.sign ({ 　　user_id: user_id 　　“sinner77”}, { 　　expiresIn:“3600年代”//过期时间设置为60妙。那么解码这个令牌的时候得到的过期时间为:创建牌的时间+设置的值 　　})； 　　返回标记; 　　}; 　　 　　

<强> 2,对于前端的请求,校验接口

　　 　　//检查牌是否过期 　　模块。下一个出口=异步(ctx)=比;{ 　　如果(ctx.request.header(“授权”)){ 　　让牌=ctx.request.header(“授权”)。分割(' ')[1];//解码牌 　　让解码=jwt.decode(令牌,“sinner77”);//console.log(解码);的输出:{user_id:‘123123123’, iat: 1494405235,经验值:1494405235} 　　如果令牌,,解码。exp & lt;=new日期()/1000){ 　　ctx。状态=401; 　　ctx。身体={ 　　消息:“令牌过期” 　　}； 　　其他}{//如果权限没问题,那么交个下一个控制器处理 　　返回下一个(); 　　} 　　其他}{ 　　ctx。状态=401; 　　ctx。身体={ 　　消息:“没有令牌” 　　} 　　} 　　}; 　　 　　

代码托管github欢迎星

　　

https://github.com/yxl720/vue-koa2-token
　　

　　

　　

以上所述是小编给大家介绍的基于vue实现令牌验证的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

基于vue实现令牌验证的实例代码