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,这个部分课程没有涉及)。

0
0

React18 系统精讲 结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发,获取必备技能

1993 学习 · 1015 问题

查看课程