axios请求需要在request header添加token的问题
来源:11-11 【redux-persist】登录持久化

柠檬树想长高
2021-04-12
老师,我需要在axios的请求拦截器中添加token数据,应该怎么获取redux中的token,普通的js文件中要怎么获取redux中的数据?还是说必须像老师您一样,在react的组件中去配置axios的拦截器吗
axios的配置文件http.js,此文件中还集中处理了其他的逻辑
let Instance = axios.create({
baseURL: BASE_URL,
})
/**请求拦截器*/
Instance.interceptors.request.use(config => {
config.headers.token = '';
return config;
}, error => {
console.log('请求错误:', error)
})
export default Instance
保存token的userSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
const initialState = {
token:''
}
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
'change_token': (state, action) => {
state.token = action.payload
}
},
extraReducers: {}
})
export {
userSlice
}
写回答
1回答
-
阿莱克斯刘
2021-04-14
因为我们的token保存在浏览器的localStorage中,所以对于普通的js来说我们完全可以直接访问localstorage来获取token。但是,不建议这样处理,因为普通的js文件没办法与react的状态链接、token的方法无法绑定react的生命周期,所以如果token改变,react组件无法得到更新的token。所以,最好能在react的组件中去配置axios的拦截器(比如app组件的componentDidMount,这个部分课程没有涉及)。
00
相似问题