React Native 中身份验证的最佳实践

Question

我是 React Native 的初学者，我正在创建一个应用程序。我已经做了一些关于如何制作安全的反应本机应用程序的研究，但我没有找到太多信息。我自己提出了一个“解决方案”，但我想确保这是正确的方法。因此，如果可能的话，我需要一些反应本机/javascript/安全专家的帮助，以快速检查我的方法是否正确？

我在本文中包含了 3 个问题，但显然它们是相关的。我已经把它们加粗了。请随意回答一个或多个问题，我感谢每一个答案！

我正在用本机反应创建一个应用程序。为了让用户能够使用该应用程序，用户应该创建一个帐户并登录。我使用 JSON Web 令牌作为访问令牌来授权从应用程序向服务器发出的请求，并识别用户（我将用户 ID 存储在 JSON Web 令牌中）。

在我的服务器上，我首先检查访问令牌是否有效。如果是，我会从访问令牌中获取用户 ID，并使用该用户 ID 来识别用户。

为了额外的安全性，我还使用刷新令牌，因为访问令牌的有效期只有 10 分钟。当用户发送带有过期访问令牌的请求时，服务器会返回 401 未授权状态。

为了使我的代码更“易于管理”，我在 React Native 中创建了一个包装函数。我用这个包装函数包装每个“请求函数”（向服务器发出 GET/POST/PUT/DELETE 请求的每个函数）。该包装函数检查请求的响应。如果响应状态为200，则将响应返回给代码。如果响应状态为 401，则将刷新令牌发送到特定端点以获取新的访问令牌。当访问令牌到达应用程序时，将使用新的访问令牌再次发出先前的请求。包装函数还将新的访问令牌存储在（临时）redux（钥匙串或共享首选项）中。1. 包装函数是个好主意吗？对我来说，它更易于管理，因为现在我正在重用代码。

每次用户打开应用程序时，都会请求新的访问令牌，当用户关闭应用程序时，当前的访问令牌将被删除，即使它尚未过期。这样，我想确保每个应用程序“会话”都以新的访问令牌开始。2.这样可以吗？或者，当我仍然拥有（可能）有效的访问令牌时，我应该阻止对服务器不必要的请求吗？

在我的 React Native 应用程序中，此包装函数位于上下文组件中。这个“身份验证”上下文包装了 App.js 中的其他组件，如下所示：

<AuthenticationProvider>
    <AppNavigator />
</AuthenticationProvider>

这样，我的包装函数就可以被所有其他组件访问。我的身份验证上下文如下所示：

const AuthenticationContext = createContext({
    accessToken: null,
    wrapperFunction: () => {}
})

const AuthenticationProvider = (props) => {

    let accessToken = null

    const refreshToken = useSelector(state => state.auth.refreshToken)

    const wrapperFunction = () => {
        // wrapper function
        // set the access token
        // await fetch('server endpoint')...     
    }

    return (
        <AuthenticationContext.Provider value={{ accessToken, wrapperFunction }}>
        {props.children}
        </AuthenticationContext.Provider>
    )
}

3. 使用上下文来做这样的事情是一个好习惯吗？

在服务器端，我将每个刷新令牌存储在数据库中。当用户请求新的访问令牌时，我检查发送的请求令牌是否仍然存在于数据库中。如果不是，我已撤销该用户的访问权限，并且该用户应该被注销。这样，我想确保我可以“管理”用户。

Answer 1

1. 是的，这是有道理的。实际上我想不出更好的方法来管理你提到的场景。当您想在发送请求之前对其进行调整时，您将需要一个函数来执行此操作。您还可以使用一些钩子，例如onBeforeSend和onAfterReceive，但在您的情况下，我没有看到任何额外的价值。

2. 我不同意删除有效令牌。您仍然可以在每个应用程序启动时向服务器发送请求以获取用户的最后数据（可能已在另一台设备上更改）。我不明白使用新会话启动应用程序的逻辑 - 也许有更多信息？

3. 我认为您不需要使用上下文传递wrapperFunction/token。如果您可以通过上下文发送用户数据，那就最好了。您的包装函数可以直接从 asyncStorage 访问令牌。并且每个组件都可以通过导入直接调用该函数。