Vue使用Axios携带token请求后端接口
2023-02-18 16:35:58 时间
携带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
相关文章
- Android Studio 下载jcenter依赖失败问题及解决
- Android开发过程中的坑及解决方法收录(7)
- Android开发——RecyclerView实现下载列表
- Android开发——实现子线程更新UI
- 星之小说下载器Android版
- Android开发——Toolbar常用设置
- Android开发——Kotlin开发APP使用笔记
- Android开发模版代码(4)——状态栏设置
- Kiosc for mac(远程控制应用)中文激活版
- 企业钟爱的小程序有何技术优势?
- 微信小程序入门
- 小程序-比较数字大小
- 小程序助力在线教育走出行业困境
- Android Material Design控件使用(四)——下拉刷新 SwipeRefreshLayout
- Android Material Design控件使用(三)——CardView 卡片布局和SnackBar使用
- Android开发过程中的坑及解决方法收录(六)
- IDEA插件(Android Studio插件)开发示例代码及bug解决
- Android Studio(IDEA)快速代码模版使用
- Android开发过程中的坑及解决方法收录(五)
- Android开发—— Tablayout的使用