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

原理：vue前端登录，提交账号密码给egg后端，后端比对信息后，使用jsonwebtoken对用户信息进

原理：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());
 };
 
 //删除cookie
function 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做登录权限验证就完成了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue egg jwt 登录验证 vue 登录验证