react-native - 反应本机应用程序中的用户身份验证

问题描述

我正在构建一个用户可以登录的本机应用程序。用户登录后，服务器会返回一个存储在设备上的身份验证令牌 (jwt)。这一切都有效。

现在，问题在于每当“发生”事情时对用户进行身份验证。

用户登录并存储令牌后，他被发送到屏幕“主”。在该屏幕（以及所有其他“安全”屏幕）上，我想检查身份验证令牌。我目前有以下功能来做到这一点（简化）：

// get the auth token out of the redux store
const authToken = useSelector(state => state.auth.authToken)

// the function to authenticate a user
const authenticateUser = () => {
    try {
        fetch('http://URL_TO_SERVER/auth/authenticate-user', {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + authToken
            }
        })
        .then(response => response.json())
        .then(responseJSON => {
            if (responseJSON.response === 'OK') {
                // user is authenticated
            } else {
                // user is NOT authenticated
            }
        })
}

// only run the function once
useEffect(() => {
    authenticateUser()
}, [])

这可行，但有一个“滞后”（因为 fetch 返回一个承诺）。当我在未登录的情况下打开应用程序并转到 I 屏幕时，屏幕仅显示一秒钟，之后，我被重定向到登录屏幕。所以它有效，但我不确定这是正确的方法。

我可以在每个屏幕上添加一个“层”并显示一个加载模式，直到 authenticateUser 函数运行，但我认为这不是正确的方法。

我的问题是：在反应原生应用程序中保护屏幕的最佳方法是什么？我这样做的方式还可以吗，还是应该改用另一种方法？

提前致谢！

编辑：在问这个问题之前，我已经检查了以下文章。

标签： react-native

您需要为身份验证检查提供更好的逻辑。通常每次打开新屏幕时都不需要检查令牌。即使在您的示例中，您登录然后被发送到主屏幕只是为了检查您刚刚收到的身份验证令牌。同样，当用户显然没有登录时，用户是否应该看到“转到主屏幕”按钮？您真的想在应用程序中每次打开新屏幕时检查令牌吗？如果令牌在您打开屏幕时有效，但是随着时间的流逝并且用户停留在同一屏幕上，令牌变得无效，会发生什么？

尝试这个：

创建将处理当前身份验证状态的 redux 存储（例如 reducer）的一部分。简单的“isAuthenticated”标志将用于启动
您可以从连接到 redux 的任何屏幕访问此标志
收到 JWT 时，您可以读取它的到期日期。因此，如果您在 5 分钟前刷新了令牌并且它不会在接下来的 2 小时内过期，则无需检查令牌是否有效，因为您可以通过将过期日期与当前日期进行比较来假设您想要的任何时间
使用“isAuthenticated”标志来确定是否显示“转到主屏幕”按钮，这样注销的用户甚至看不到该按钮
如果您需要更多控制，请连接到导航以检查用户试图导航到的位置，并通过检查 redux 商店中的“isAuthenticated”标志来允许/拒绝它。看看这里和这里
创建一个服务来跟踪令牌到期日期并在需要时提前刷新令牌，或者定期检查当前令牌是否有效，如果不是，则将“isAuthenticated”设置为 false。围绕您的网络功能创建包装器（在您的示例中为获取）并在收到状态 401 以响应对服务器的任何请求时通知此服务，以便该服务可以刷新令牌并重复请求，或者让用户知道他已登录出去

react-native - 反应本机应用程序中的用户身份验证

问题描述

解决方案

推荐阅读