前端token验证 vue

通过登录返回的token，请求其他接口时，要把token放入请求头X-token

login.vue （登录页面，后台给的token返回到了result里面，所以我取result的值）

window.localStorage['result'] = res.data.result  //将他存到localstorage中

 

2020.3.17（更新）

token：请求登录的后台接口返回token，存到session中，登录的时候，将后台返回的token存到session中，再在请求的时候将token带过去

 

 

fetch.js

import axios from 'axios'
import { baseUrl } from './evn'
import { Message } from 'element-ui'
import router from '../router'
// import store from '../store/store'
import Qs from 'qs'

// 创建axios实例
const service = axios.create({
  baseURL: baseUrl,
  transformRequest: [
    function (data) {
      // Do whatever you want to transform the data
      return Qs.stringify(data)
    }
  ] // maxContentLength: ''
})

// request拦截器
service.interceptors.request.use(
  config => {
    let token = localStorage.getItem('result')
    if (token) {
      config.headers['X-token'] = token
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

// respone拦截器
service.interceptors.response.use(
  res => {
    if (res.data.result === -102) {
      localStorage.removeItem('result')
      router.replace('/login')
    }
    return res
  },
  err => {
    Message({
      showClose: true,
      message: '服务器有事离开一下，马上就回来',
      type: 'error'
    })
    return Promise.reject(err)
  }
)

export default service