React Redux如何从localStorage获取access token传入axios请求头

下方是我浏览器localStorage的存储内容截图，请问我该如何从中取出access token，将其作为请求头传入下述action页面的接口请求中？请提供可行的实现方案，说明在React Redux开发中如何从localStorage读取token，并在action页面中正常调用。

原代码片段：

import axios from 'axios';
export const upiAction = {
    upi,
};
function upi(user) {
return (dispatch) => {
        var data = {
            upiId: user.upiId,
            accountNumber: user.accountNumber,
        };

        axios
            .post('http://localhost:9091/upiidcreation', data,
        )
            .then((res) => {

                console.log("res", (res));

                const { data } = res;
                alert(JSON.stringify(data.responseDesc));

                // window.location.pathname = "./homes";
                if (data.responseCode === "00") {
                    window.location.pathname = "./home"
                }
            })
            .catch(err => {

                dispatch(setUserUpiError(err, true));
                alert("Please Check With details");

            });


    };
}

export function setUserUpi(showError) {
    return {
        type: 'SET_UPI_SUCCESS',
        showError: showError,

    };
}


export function setUserUpiError(error, showError) {
    return {
        type: 'SET_UPI_ERROR',
        error: error,
        showError: showError,
    };
}

单接口临时修改方案 #

直接在当前action里读取token，加到axios请求配置中即可，分两步：

• 读取localStorage中的token：用localStorage.getItem()方法读取，注意根据你实际存储token的key名调整，如果token存在序列化的JSON对象中，需要先用JSON.parse()转成对象后再取token字段，记得加空值兜底避免报错。
• 配置axios请求头：axios.post的第三个参数是请求配置对象，在headers字段中添加Authorization请求头，格式一般为Bearer <token>，如果后端有特殊约定按后端要求调整。

修改后的完整代码：

import axios from 'axios';
export const upiAction = {
    upi,
};
function upi(user) {
return (dispatch) => {
        var data = {
            upiId: user.upiId,
            accountNumber: user.accountNumber,
        };

        // 读取token，替换成你本地实际存储token的key
        // 场景1：token直接作为独立字段存储，key为accessToken
        const accessToken = localStorage.getItem('accessToken') || '';
        // 场景2：token存在key为userInfo的JSON结构中，注释掉上面一行，用下面两行
        // const storageUser = JSON.parse(localStorage.getItem('userInfo') || '{}');
        // const accessToken = storageUser.accessToken || '';

        axios
            .post('http://localhost:9091/upiidcreation', data, {
                headers: {
                    // 携带token，格式按后端要求调整
                    'Authorization': `Bearer ${accessToken}`,
                    'Content-Type': 'application/json'
                }
        })
            .then((res) => {

                console.log("res", (res));

                const { data } = res;
                alert(JSON.stringify(data.responseDesc));

                if (data.responseCode === "00") {
                    window.location.pathname = "./home"
                }
            })
            .catch(err => {

                dispatch(setUserUpiError(err, true));
                alert("Please Check With details");

            });


    };
}

export function setUserUpi(showError) {
    return {
        type: 'SET_UPI_SUCCESS',
        showError: showError,

    };
}


export function setUserUpiError(error, showError) {
    return {
        type: 'SET_UPI_ERROR',
        error: error,
        showError: showError,
    };
}

全局统一配置方案（推荐） #

如果项目中大部分接口都需要携带token，不需要每个接口重复写读取和加头的逻辑，可以通过axios请求拦截器统一处理：

• 先封装独立的axios实例，配置公共baseURL
• 添加请求拦截器，所有请求发出前自动从localStorage读取token，加到请求头中
• 后续所有接口请求都用这个封装好的实例发送即可

拦截器示例代码：

// 可以单独建一个request.js文件存放这段配置
import axios from 'axios';

const service = axios.create({
  baseURL: 'http://localhost:9091',
  timeout: 10000
});

// 请求拦截器统一注入token
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('accessToken') || '';
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

export default service;

内容的提问来源于stack exchange，提问作者vinothini K B