Question

我有一个用Nodal构建的简单API，它允许用户创建一个新工作（本质上是服务业务的工作订单）。 API正在使用OAuth，因此，为了创建新作业，用户必须首先通过用户名和密码进行身份验证来获取令牌。

前端将在React中构建。为了访问该站点，用户必须使用他们的用户名和密码登录，此时他们将获得一个令牌来进行API调用。两个问题：

1）如何安全地存储API令牌，以便用户每次刷新页面时都不必登录？

2）如何使用相同的登录步骤来确定他们是否可以访问前端应用程序中的任何给定页面？

Answer 1

这是我在当前项目中使用的过程。当用户登录时，我将获取令牌并存储在localStorage中。然后，每次用户前往任何路线时，我都会将该路线所服务的组件包裹起来。以下是检查令牌的HOC代码。

<Route path='/protected' component={requireAuthentication(ProtectedComponent)} />

然后在我的index.js中，我用这个HOC包装每个受保护的路由，如下所示：

export default function userReducer(state = {}, action) {
    switch(action.type) {
        case types.USER_LOGIN_SUCCESS:
            return {...action.user, isAuthenticated: true};
        default:
            return state;
    }
}

这是用户缩减器的外观。

union

action.user包含令牌。令牌可以来自用户首次登录时的api，也可以来自localstorage（如果此用户已经是登录用户）。

来自React App的API用户身份验证

1 个答案: