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

用户10275458

发布于 2022-12-21 08:31:18

1.4K0

发布于 2022-12-21 08:31:18

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

在项目中安装axios、js-cookie

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-12-19，如有侵权请联系 cloudcommunity@tencent.com 删除

腾讯云开发者社区