Presist 用户在刷新后使用没有 LocalStorage 的 React JWT Redux 登录

Presist user logged in with React JWT Redux Without LocalStorage after refresh

我正在我的 react node-express psql 应用程序中设置一个身份验证系统。我在互联网上阅读了很多关于存储 jwt 的内容和博客,但仍然需要一些说明。

我看过很多教程,比如把jwt存储在localstorage中,他们的私有路由是这样的

const token = JSON.parse(localStorage.getItem('token'))

 <Route
                {...rest}
                render={(props) =>
                    token ? (
                        <div className="relative ml-28 mr-10">
                            <Component {...props} />
                        </div>
                    ) : (
                        <Redirect
                            to={{
                                pathname: '/',
                                state: { from: props.location.pathname },
                            }}
                        />
                    )
                }
            />


  1. 这样安全吗?如果有人在 localstorage 中添加一个名为 'token' 的新值和一些随机值将被视为已登录,对吗?

  2. 如果不推荐本地存储,有什么解决方案?

  3. 是否可以在每次路由加载时使用 JWT 发送 HTTP 请求以验证用户? (在每页加载时)

实际上,将 JWT Token 存储在本地存储中应该是完全安全的,据我所知,这是最佳实践。

在您的 API 中,您应该有一些受保护的路由(需要授权用户),例如 POST /user-dataGET user-messages ... 另一方面,您应该有其他不受保护的路由,例如 /login/user-profile.

对于那些需要授权的人,您需要创建一个名为 authorize 的中间件,它应该在受保护的路由上调用。该中间件应该从 req.authentication 之类的请求中获取 jwt 令牌并对其进行解码。假设令牌是用用户电子邮件编码的。解码它会把那封电子邮件还给你。通过手头的电子邮件,您可以查看用户是否存在以及他的角色是否允许他在路由上执行操作。

至此,我想我已经简单地回答了第一个问题,如果有人从浏览器更改localstorage中的accessToken,不会造成任何伤害,因为它不会让他做任何事情。