javascript - 如何在axios中配置授权承载令牌?
问题描述
嗨,我创建了一个登录操作(使用 Vuex),它将用户 jwt 令牌保存到本地存储。在这个登录动作中,我调用另一个动作来获取该用户创建的一些帖子。当我在 fetchPosts 操作的获取请求的标头中传递令牌时,它工作得很好。
async login(context, user){
try {
const res = await api.post('/users/login', user)
localStorage.setItem('jwt', res.data.token)
context.commit('SET_USER', res.data.user)
context.dispatch('fetchPosts')
}catch(err){
console.log(err.response.data)
}
}
async fetchPosts(context){
try {
const res = await api.get('/posts', {
headers: {
Authorization: `Bearer ${localStorage.getItem('jwt')}`
}
})
context.commit('SET_POSTS', res.data)
}catch(err){
console.log(err.response.data)
}
}
上面的代码工作得很好,但问题是我有几个身份验证路线,我不想通过
headers: { Authorization: `Bearer ${localStorage.getItem('jwt')}`}
对于所有 api 请求。
我想在 1 个文件中进行配置,我尝试过,但是当我登录时,我收到未经身份验证的消息,当我签入网络选项卡时,我看到 Bearer null 已传递给授权。请参阅下面我的配置尝试。
import axios from 'axios'
export default axios.create({
baseURL: 'http://localhost:3000',
headers: {
Authorization: `Bearer ${localStorage.getItem('jwt')}`
}
})
任何人都知道我哪里出错了或者我可以做些什么来解决这个问题。
解决方案
这是一个简单的例子来说明如何做到这一点。
axios.interceptors.request.use(
(config) => {
const token = localStorage.getItem('authtoken');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
在此处查找更多信息
推荐阅读
- linux-kernel - 从 linux 内核模块移动文件
- python - Python:循环可变数量的输入
- apache-kafka - Kafka Connect 能否使用来自单独的 Kerberized Kafka 实例的数据,然后路由到 Splunk?
- php - 在子域上托管 php 站点的旧部分?
- javascript - 我可以将数组转换为 RegEx 形式吗?
- node.js - Express.js v^4.17.1 上的“req.body”从发布请求中返回“未定义”
- c# - 应用多个 Polly 策略的最佳顺序是什么?
- kotlin - 如何避免在 kotlin 中暴露可变属性?
- java - Redis模型注释中数据类中的环境变量
- android - handleFacebookAccessToken 对测试用户返回错误