原理: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 => {
le