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中：

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中的信息则：