我在 Nodal 中内置了一个简单的 API，它允许用户创建一个新工作（本质上是服务业务的工作订单）。API 使用 OAuth，因此为了创建新作业，用户必须首先通过用户名和密码进行身份验证来获取令牌。
前端将在 React 中构建。为了访问该站点，用户必须使用他们的用户名和密码登录，此时他们将获得一个令牌以进行 API 调用。两个问题：
1) 如何安全地存储 API 令牌，以便用户不必在每次页面刷新时登录？
2) 我如何使用相同的登录步骤来确定他们是否有权访问前端应用程序中的任何给定页面？
来自 React App 的 API 用户身份验证
IT技术
javascript
api
reactjs
frontend
2021-05-03 01:49:39
1个回答
这是我在当前项目中使用的过程。当用户登录时，我获取令牌并存储在 localStorage 中。然后每次用户访问任何路由时，我都会将路由服务的组件包装在一个 hoc 中。这是检查令牌的 HOC 的代码。
export function requireAuthentication(Component) {
class AuthenticatedComponent extends React.Component {
componentWillMount () {
this.checkAuth(this.props.user.isAuthenticated);
}
componentWillReceiveProps (nextProps) {
this.checkAuth(nextProps.user.isAuthenticated);
}
checkAuth (isAuthenticated) {
if (!isAuthenticated) {
let redirectAfterLogin = this.props.location.pathname;
browserHistory.push(`/login?next=${redirectAfterLogin}`);
}
}
render () {
return (
<div>
{this.props.user.isAuthenticated === true
? <Component {...this.props}/>
: null
}
</div>
)
}
}
const mapStateToProps = (state) => ({
user: state.user
});
return connect(mapStateToProps)(AuthenticatedComponent);
}
然后在我的 index.js 中，我用这个 HOC 包裹每个受保护的路由，如下所示：
<Route path='/protected' component={requireAuthentication(ProtectedComponent)} />
这就是用户减速器的外观。
export default function userReducer(state = {}, action) {
switch(action.type) {
case types.USER_LOGIN_SUCCESS:
return {...action.user, isAuthenticated: true};
default:
return state;
}
}
action.user 包含令牌。令牌可以来自用户首次登录时的 api，或者来自 localstorage（如果该用户已经是登录用户）。