前端token验证 vue

最新推荐文章于 2024-08-11 14:56:15 发布

原创最新推荐文章于 2024-08-11 14:56:15 发布 · 456 阅读

1 ·

CC 4.0 BY-SA版权

vue2.0 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在登录成功后，利用返回的Token进行后续接口请求的方法。通过将Token存储在localStorage中，并在每次请求时将其加入到请求头X-token中，确保了API调用的安全性和有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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