如何在React Redux中从本地存储传递访问令牌

Question

在此输入图片描述

这里有我的本地存储的屏幕截图。我如何从那里获取访问令牌作为下面操作页面中的标头传递。请为此提供任何解决方案。我们如何使用 React Redux 从本地存储中获取令牌并在操作页面中显示。

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,
    };
}

Answer 1

如果您只需要获取令牌并将其作为 api 请求中的标头发送，您可以这样做

let storageValue =JSON.parse(localStorage.getItem('currentUser')

storageValue 对象将拥有您存储在 localStorage 中的全部内容。

 axios.post('http://localhost:9091/upiidcreation', data, {
    headers: {
     token : storageValue?.data?.accessToken
    }
  })

Answer 2

你可以这样获取localStorage对象

let localStorageObject = JSON.parse(localStorage.getItem('currentUser'));

然后您可以使用该对象来获取访问令牌，如下所示：

localStorageObject?.data?.accessToken