首页 > 编程 > JavaScript > 正文

vue+egg+jwt实现登录验证的示例代码

2019-11-19 11:31:40
字体:
来源:转载
供稿:网友

原理:vue前端登录,提交账号密码给egg后端,后端比对信息后,使用jsonwebtoken对用户信息进行签名生成token,之后通过cookie返回给vue前端,前端需要使用token里的信息就使用js-base64进行token第二段解码即可。

vue前端路由跳转,进入路由前置守卫检测cookie中的token是否存在,不存在(已过期)则跳转登录,否则继续执行,然后在http拦截器里请求时存在token请求头带上token,后端未得到header则返回错误码,得到则用jsonwebtoken进行验证,是时间错误就从新发放token令牌,否则返回错误码,还要及时更新cookie时间,保证登录态.

vue前端main.js中:

import axios from 'axios';import cookie from './public/util';router.beforeEach((to, from, next) => { console.log('路由拦截') //判断要去的路由有没有requiresAuth if (to.meta.requiresAuth) {  let token = cookie.getCookie('token');  if (token) {   next();  } else {   next({    path: '/login'   });  } } else {  next(); //如果无需token,那么随它去吧 }})// http request 拦截器axios.interceptors.request.use( config => {  let token = cookie.getCookie('token');  console.log(token)  if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token   config.headers.authorization = `token ${token}`;  }  return config; }, err => {  return Promise.reject(err); }); // http response 拦截器axios.interceptors.response.use( response => {  return response; }, error => {  if (error.response) {   switch (error.response.status) {    case 401:     // 返回 401 清除token信息并跳转到登录页面     router.replace({      path: '/login'     });   }  }  return Promise.reject(error.response.data);  // 返回接口返回的错误信息 });Vue.prototype.$http = axios;

其中util.js中我封装了操作cookie的方法

//获取cookie、function getCookie(name) {  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");  if (arr = document.cookie.match(reg))   return (arr[2]);  else   return null;  }    //设置cookie,增加到vue实例方便全局调用function setCookie (c_name, value, expiredays) {  var exdate = new Date();  exdate.setDate(exdate.getDate() + expiredays);  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());  };    //删除cookiefunction delCookie (name) {  var exp = new Date();  exp.setTime(exp.getTime() - 1);  var cval = 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中的信息则:

let token = cookie.getCookie('token');let Base64 = require('js-base64').Base64;let str = token.split('.')[1];let user = JSON.parse(Base64.decode(str));console.log(user)

后端在登录逻辑执行完后,需要给前端发放token

 let jwt = require('jsonwebtoken');    let token = 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 = () => { const jwt = require('jsonwebtoken'); return async function (ctx, next) {  if (ctx.request.header['authorization']) {   let token = ctx.request.header['authorization'].split(' ')[1];   console.log(token)   let decoded;   //解码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   });   await next();  } else {   ctx.status = 401;   ctx.body = {    message: '没有token'   }   return;  } }};

最后在需要登录才可访问的资源路由上使用该中间件,如:

 const checktoken = app.middleware.checktoken(); router.get('/test',checktoken,controller.util.test);

至此,以cookie维护登录态,token做登录权限验证就完成了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表