Vue使用Axios携带token请求后端接口

携带token请求接口的其中一种方法就是在请求拦截器中将token添加到请求头中

在项目中安装axios、js-cookie

代码语言：javascript复制

npm i axios
npm i js-cookie

对网络请求进行封装

代码语言：javascript复制

import axios from 'axios'
import { getToken } from './token'

const instance = axios.create({
  //这里写基础配置
})

//请求预处理
instance.interceptors.request.use(
  (config) => {
    const token = getToken() //getToken是在另一个JS文件中封装好的方法
    token && (config.headers['authorization'] = token)
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

export const request = instance

代码语言：javascript复制

//token.js

import Cookies from 'js-cookie'

const key = 'TOKEN'

/*
 * 获取Token
*/
export function getToken() {
  return Cookies.get(key)
}

/*
 * 设置Token
*/
export function setToken(token) {
  return Cookies.set(key, token)
}

/*
 * 移除Token
*/
export function removeToken() {
  return Cookies.remove(key)
}

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1is3nxm8q531b

腾讯云开发者社区 axios cookie token 博客

0 人点赞