在 React Redux 应用程序中使用 JWT 身份验证令牌的正确方法答案

【问题标题】：Right way to use JWT auth token in React Redux app在 React Redux 应用程序中使用 JWT 身份验证令牌的正确方法
【发布时间】：2018-02-08 16:53:06
【问题描述】：

我正在为我的 React Redux 应用程序身份验证使用 JWT，而且我有很多需要我的秘密令牌的服务。我将 JWT 令牌保存在 cookie 中，以及我的 common 减速器的 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
        }
    });
}

所以我很感兴趣访问 JWT 令牌的正确方法是什么，从我正在做的 redux 商店或直接从服务中的 cookie？

【问题讨论】：

标签： javascript reactjs redux react-redux jwt

【解决方案1】：

这就是 Redux 中间件的用武之地 - 基本上它是一种处理更复杂类型操作的方式。最常用的中间件是 redux-thunk (https://github.com/gaearon/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 并通过操作传递秘密
我想我可以为令牌创建选择器并使用这个选择器从我的 sagas 中获取令牌
这似乎有点不方便。如果你这样做，那么你需要将秘密传递给每个服务函数。
是的，更方便的方法是在应用程序引导期间获取秘密，创建一个知道秘密的 API 对象，然后使用中间件将该 API 注入到您的操作中。这是我的首选解决方案，但并不真正符合要求。
如果您有兴趣，乐意创建另一个答案吗？

【解决方案2】：

使用 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]');
 }

【讨论】：