zl程序教程

您现在的位置是:首页 >  APP

当前栏目

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

2023-02-18 16:35:58 时间

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

npm i axios
npm i js-cookie

对网络请求进行封装

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
//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