Javascript 在React Redux应用程序中使用JWT auth令牌的正确方法

我正在使用JWT作为我的React Redux应用程序auth，我还有很多需要我的秘密令牌的服务。 我将JWT令牌保存在cookies中，以及我的

common

reducer的

user

对象中。 因此，每次我需要执行请求时，我都会使用

this.props.dispatch

像这样

this.props.dispatch({
    type: types.ADMIN_DATA_REQUEST,
    secret: this.props.user.token
});

这是我的服务

function getAdminData(secret) { 
    axios.get(config.api + api.adminData, {
        params: {
           secret
        }
    });
}

---

所以我很感兴趣的是，从redux商店访问JWT令牌的正确方式是什么，就像我正在做的那样，还是直接从服务中访问cookies？

使用axios，您可以在加载服务文件时创建一个新实例。因此，您将按如下方式导出此实例：

export const fetch = axios.create({
  baseURL: [YOUR SERVICE BASE URL]
})

然后，在同一文件中，您可以导出一个函数，以便在您拥有用户令牌时设置它：

export function setUserSecret (secret) {
  fetch.defaults.params['secret'] = secret
}

因此，无论您想呼叫哪种服务，您都可以：

 import { fetch } from '[your_service_file.js]' 
 function getAdminData() { 
   fetch.get('[service path]');
 }

---

这就是Redux中间件的用武之地——基本上，它是一种处理更复杂类型操作的方法。最常用的中间件是redux thunk（），它允许您分派有权访问redux状态的函数。因此，使用redux thunk，您可以在redux中存储您的秘密并执行以下操作：

const requestDataAction = () => ( dispatch, getState ) => {
    const secret = getState().user.secret;
    getAdminData( secret ).then( adminData => {
         dispatch({ type: "UPDATE_ADMIN_DATA", adminData });
    });
};

这是一个返回函数的函数，这有点混乱，但它确实有意义。外部函数是从React组件调用的（使用mapPropsToDispatch连接后）。内部是由中间件处理的thunk，它为您注入dispatch和getState函数

---

这样做的好处是，你不需要你的“秘密”在你的React组件中成为道具，因为它从不用于渲染任何东西，它只在动作中使用，

我使用的是

redux saga

并从Action传递机密我认为我可以为令牌创建选择器并从我的sagastash中使用此选择器获取令牌这似乎有点不方便。如果您这样做，那么您需要将机密传递给每个服务函数。是的，更方便的方法是在应用程序引导过程中获取机密，创建了解该机密的API对象，然后使用中间件将该API注入到您的操作中。这是我的首选解决方案，但并不完全符合要求。如果您感兴趣，是否愿意创建另一个答案？