利用拦截器实现token前后端的同步

利用拦截器实现token前后端的同步

要想用拦截器对token和后端进行同步，首先我们需要搞个前端的拦截器

1. 配置拦截器

/**
 * 功能说明：axios配置
 */

import axios from 'axios'
import rnopJs from 'rnop-js'

// 请求拦截器 请求之前执行
axios.interceptors.request.use(function (config) {
  // 给header设置token
  config.headers.sso_token = rnopJs.token.getToken()
  return config
}, function (error) {
  // 请求发生错误时执行
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use(function (response) {
  // 可对响应response做一些操作
  return response
}, function (error) {
  // 响应发生异常时触发
  return Promise.reject(error)
})

export default axios

2. 在main.js中进行配置

import axios from '@/util/utilconfig/axios-config'

// 将axios挂在到vue组件的原型上
Vue.prototype.$http = axios

4. 在router下的index.js中写一个在每次跳转路由前对token刷新的方法

import rnopJs from 'rnop-js'


router.beforeEach((to, from, next) => {
  // 每次路由跳转之前校验 token
  rnopJs.token.verifyToken(`/api/UserController/getAllUser`, next)
  // next()
})

访问后台此时会有跨域的问题，下一个帖子进行解决