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

Posted 2023-03-10

【中文标题】在 React Redux 应用程序中使用 JWT 身份验证令牌的正确方法

【英文标题】：Right way to use JWT auth token in React Redux app

【发布时间】：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？

【参考方案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]');