Vue使用Axios携带token请求后端接口
2023-02-18 16:30:14 时间
携带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)
}
相关文章
- [PHP] laravel框架注意bootstrap/cache
- 《吐血整理》高级系列教程-吃透Fiddler抓包教程(35)-Fiddler如何抓取微信小程序的包-下篇
- 网站在线客服系统源码 | 全渠道在线客服代码下载 (最新版支持外贸商城/H5/小程序/公众号对接)
- 前端vue2+vue-router3+ElementUI+axios综合使用代码教程登录页案例
- 在线客服系统对接微信小程序(客服消息推送)
- 【小程序】同一微信号在微信开发工具上怎么切换小程序
- 【小程序】微信公众号模板消息跳转小程序发送失败:errcode=40013 , errmsg=invalid appid rid:
- 【小程序】微信小程序报错47001 - data format error hint
- 【小程序】微信小程序报错:用户绑定的手机需要进行验证,请在客户端完成短信验证
- 【小程序】微信小程序设置globalData全局数据
- 【小程序】获取手机号报错:getPhoneNumber:fail no permission
- 【小程序】小程序webview不支持打开非业务域名请重新配置
- 【uniapp】uniapp微信小程序开发:启动微信开发者工具提示no such file or directory错误
- 【小程序】uniapp发行微信小程序上传失败Error: Error: {"errCode":-10008,"errMsg":"invalid ip
- 【小程序】如何获取微信小程序代码上传密钥?
- [前端] 前端bootstrap col-xs-6 col-md-3的布局意思
- 解放重复劳动丨华为云IoT API Explorer对接小程序实现系统化应用
- [小程序] 支付宝小程序使用list时提示元素不存在
- [javascript] 支付宝小程序网络GET请求
- [PHP] laravel框架注意bootstrap/cache