Vue路由之JWT身份认证的实现方法

const jwt = require("jsonwebtoken"); // 引入jwt
const secret = "this is a private key"; // 指定一个用于生成token的密钥字符串
const token = jwt.sign({ foo: 'bar' }, secret, { // 传入元数据和secret密钥，并指定过期时间生成token
  expiresIn: 5, // 单独一个数字表示多少秒
  // expiresIn: "10h", // 表示10小时后过期
  // expiresIn: "2d" // 表示2天后过期
});
console.log(`token is ${token}`);
setTimeout(() => { // 5秒后对该token进行校验
  jwt.verify(token, secret, (err, decoded) => {
    console.log(err);
    if (err) {
      console.log('token 已经失效了.');
    } else {
      console.log(`token data is ${JSON.stringify(decoded)}`);
    }
  });
}, 5000);

// 生成的token字符串为
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1NjY3MzE4MzEsImV4cCI6MTU2NjczMTgzNn0.cZZkExNnVqBtnfQN2vtU2Z7JB0PBo1CFyC5NiOywg54

// token decoded后的数据
token data is {"foo":"bar","iat":1566731831,"exp":1566731836}

import axios from "axios";
class Request {
  constructor() {
    this.baseURL = process.env.NODE_ENV === 'development' "color: #ff0000">四、通过路由钩子进行登录校验


我们需要在路由跳转之前，进行登录校验，即校验登录的token是否已经过期，如果token没有失效，则可以继续访问页面；如果token已经失效，那么检查一下所访问的页面是否需要登录才能访问，如果是需要登录后才能访问，那么跳转到登录页面；如果是不需要登录也能访问的页面则继续访问；




const whiteList = ["/"]; // 定义一个白名单列表
router.beforeEach(async (to, from, next) => {
 if (whiteList.includes(to.path)) { // 如果是访问的白名单中的页面
  return next(); // 不需要校验，直接返回继续访问该页面
 }
 const isTokenAvailable = await store.dispatch('validate'); // 校验token是否失效
 if (isTokenAvailable) { // 如果token未失效
  if(to.path === "/login") { // 如果访问的是login页面，则回到首页
   next("/");
  } else { // 如果访问的不是login页面，则继续访问当前要访问的页面
   next();
  }
 } else { // 如果token失效了
  const needLogin = to.matched.some(item => item.meta.needLogin); // 检测要访问的页面是否需要登录才能访问
  if(needLogin) { // 如果访问的页面是需要登录的
   next("/login"); // 跳转到登录页面
  } else { // 如果访问的页面是不需要登录的，则直接继续访问
   next();
  }
 }
});



上面item.meta.needLogin，这个needLogin是在router中进行自定义配置的，在配置路由的时候，允许通过meta属性配置一些自定义的元数据，如下所示:




export default new Router({
 routes: [
  {
   path: '/profile',
   name: 'profile',
   component: Profile,
   meta: {needLogin: true}
  }
 ]
})



五、总结


jwt认证，主要就是Vue路由钩子beforeEach()的应用，以及请求拦截器的封装，在每次路由跳转前进行token认证(校验)，检测token是否失效，其校验过程就是向服务器发起一个请求，比如"/validate"，由于客户端请求拦截器的作用，会在发起"/validate"请求之前，在请求头的Authorization字段加上token，服务器收到token后就能对token是否有效进行校验了，然后返回token校验结果，客户端再根据token的校验结果进行路由的具体跳转。


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