reactjs - 在 Redux 应用程序中提供 OAuth 访问 token 的策略

Question

我有一个 Redux 应用程序和一个充当 OAuth 服务器的远程 API。根据典型的例程，用户将其凭据交换为 token ，然后应用程序使用该 token 来获取数据并在服务器上执行一些操作。该 token 存储在存储中，也存储在 sessionStorage 中。

现在，有时访问 token 会过期，但由于已收到刷新 token ，最好先尝试刷新，并且只有在出现错误时才注销用户。

我完全理解签署部分，从技术上讲，这意味着简单地调度某个操作。但如何简化 token 刷新例程呢？

我尝试过 redux-saga，但它非常冗长。我确实必须为依赖于远程 API 的每个操作部分复制代码，以确保每个类似的请求都会首先检查访问 token 及其是否尚未过期，然后设法刷新它。

我尝试做的另一件事是一个中间件，它期望某种类型的操作，并将对远程 API 的请求封装到 Promise 中。这种方法可行，但我很好奇是否还有其他方法可以做到。

有人曾经实现过这种(非常通用的)类型的事情吗？有什么想法可以自动更新 token 并且不因代码量的增加而生气吗？也许是高阶组件？

Answer 1

对于需要重复发生的代码以及需要无缝和通用的代码，中间件通常是最佳选择。它可以很简单，只需在创建存储时添加两行代码以包含中间件并编写一个简单的函数来为您处理 token 逻辑即可。

假设您将这样创建商店:

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers';
import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import tokenMiddleware from './middleware/token';

const finalCreateStore = compose(
    applyMiddleware(
      routerMiddleware(browserHistory),
      tokenMiddleware,
    ),
    window.devToolsExtension ? window.devToolsExtension() : f => f,
)(createStore);

然后您可以从某个地方以初始状态调用此函数。

const store = finalCreateStore(rootReducer, initialState);

这将使您能够对通过商店的所有操作执行某些操作。由于使用 Promise 处理 API 调用的中间件很常见，因此有些人更喜欢为此目的重复使用它并将两者捆绑在一起。

典型的中间件看起来像这样:

export const tokenMiddleware = ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') { // pass along
        return action(dispatch, getState);
    }

    // so let's say you have a token that's about to expire
    // and you would like to refresh it, let's write so pseudo code

    const currentState = getState();
    const userObj = state.authentication.user;

    if (userObj.token && userObj.token.aboutToExpire) {
       const config = getSomeConfigs();
       // some date calculation based on expiry time that we set in configs
       const now = new Date();
       const refreshThreshold = config.token.refreshThreshold;

       if (aboutToExpireAndIsBelowThresholdToRefresh) {
           // refreshTheToken can be an action creator
           // from your auth module for example
           // it should probably be a thunk so that you can handle 
           // an api call and a promise within once you get the new token
           next(refreshTheToken(userObj, someOtherParams);
       }
    }

    ....

    return next(action);
}

您的刷新 token thunk 可能与此类似:

function refreshToken(user, maybeSomeOtherParams) {
    const config = getSomeConfigs;

    return dispatch => {
        makeAPostCallWithParamsThatReturnsPromise
        .then(result => dispatch(saveNewToken({
            result,
            ...
        })))
        .catch(error => dispatch({
            type: uh_oh_token_refresh_failed_action_type,
            error,
        }));
 };

您可能会选择的另一种选择是在更改路线时处理此问题。

假设您在某处有一个顶级路由，用于需要身份验证和系统中存在有效用户的路由。我们将它们称为经过身份验证的路由。

您可以使用定义 onChange 处理函数的顶级路由来包装这些经过身份验证的路由。像这样的事情:

<Route onChange={authEntry}>
    <Route ... /> // authenticated routes
    <Route ... />
</Route>

在创建这些路由并设置商店时，创建商店后，您可以将其绑定(bind)到名为 checkAuth 的函数。

const authEntry = checkAuth.bind(null, store)

另一种方法是将路由定义包装在一个函数中并将存储传递给它，然后您就可以进行相同的访问，但我发现这并不像这样干净(个人偏好)。

现在这个 checkAuth 会做什么？

类似这样的事情:

export function checkAuth (store, previous, next, replace, callback) {
    const currentUser = store.getState().auth.user

    // can possibly dispatch actions from here too 
    // store.dispatch(..).then(() => callback())..
    // so you could possibly refresh the token here using an API call
    // if it is about to expire

    // you can also check if the token did actually expire and/or 
    // there's no logged in user trying to access the route, so you can redirect

    if (!currentUser || !isLoggedIn(currentUser)) {
        replace('/yourLoginRouteHere')
    }

    callback() // pass it along
}

这两者都应该足够通用，以便它们在集中位置为您提供可重用的代码。希望您会发现这些有帮助。