怎么在vue中使用egg和jwt实现一个登录验证功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
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);看完上述内容，你们掌握怎么在vue中使用egg和jwt实现一个登录验证功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
