前后端分离之JWT（JSON Web Token）的使用

使用教程

前端 Vue.js

vue-router

登录时，将后端返回的 token 存入 localStorage

使用 Vue-Router 判断是否存在 token，不存在跳转至登录

// JWT 用户权限校验，判断 TOKEN 是否在 localStorage 当中
router.beforeEach(({name}, from, next) => {
  // 获取 JWT Token
  if (localStorage.getItem('JWT_TOKEN')) {
    // 如果用户在login页面
    if (name === 'login') {
      next('/');
    } else {
      next();
    }
  } else {
    if (name === 'login') {
      next();
    } else {
      next({name: 'login'});
    }
  }
});

axios

axios 全局配置拦截器
每次向后端请求携带 头信息

在 src/main.js 当中加上以下代码：

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (localStorage.JWT_TOKEN) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.Authorization = `token ${localStorage.JWT_TOKEN}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      console.log('axios:' + error.response.status);
      switch (error.response.status) {
        case 401:
          // 返回 401 清除token信息并跳转到登录页面
          store.commit('LOG_OUT');
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}
          });
      }
    }
    return Promise.reject(error.response.data);   // 返回接口返回的错误信息
  });

Vue.prototype.$http = axios;

后端

application.yml

#jwt
jwt:
  header: Authorization
  secret: mySecret
  # token 过期时间 2个小时
  expiration: 7200000
#  expiration: 60000
  auth:
    # 授权路径
    path: /login
    # 获取用户信息
    account: /info

ShiroConfig.java

JwtTokenUtil