反应本机应用程序中的用户身份验证答案

【问题标题】：user authentication in a react native app反应本机应用程序中的用户身份验证
【发布时间】：2020-05-18 11:21:09
【问题描述】：

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

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

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

// 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 本机应用程序中保护屏幕的最佳方法是什么？我这样做的方式可以吗，还是应该换一种方式？

提前致谢！

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

【问题讨论】：

标签： react-native

【解决方案1】：

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

试试这个：

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

【讨论】：

【解决方案2】：

查看我认为实现它的最佳方法是向应用程序添加启动画面，如果存在令牌，您可以转移逻辑，您可以重定向到主屏幕或登录屏幕。

像这样：

在 Splashscreen.js 中

componentDidMount(){

AsyncStorage.getItem('token') ? navigation.navigate('Home'):navigation.navigate('Login')
}

希望对您有所帮助。如有疑问，请随意

【讨论】：