React JS 如何处理身份验证

Question

我正在尝试加入后端（Express JS）和前端（React JS）。现在我正在尝试了解如何处理会话管理。

当用户使用 React JS 制作的表单登录时，后端会返回一个 HS-256 JWT 令牌，其中包含用户信息作为有效负载。

为了避免未登录的用户获取数据，我读到前端必须将不记名令牌作为标头发送，这可以正常工作。但是我无法找到一种方法来避免用户首先使用该应用程序，我的意思是，当每个页面加载时。

现在我的登录代码如下所示：

import React, { useEffect, useState } from 'react';
import { useCookies } from 'react-cookie';

export default () => {
    const [cookies, setCookie] = useCookies(['auth']);
    const [redirect, setRedirect] = useState(false);

    const handleSubmit = async e => {
        e.preventDefault();
        const response = await fetch('server/auth/login', options);
        const {token} = await response.json();
        setCookie('token', token, { path: '/' });
    };

    useEffect(() => {
        if (cookies.auth) {
            setRedirect(true);
        }
    }, [cookies]);

    if (redirect) {
        return <Redirect to="/admin" />;
    }

    return <form onSubmit={handleSubmit}>...</form>
};

我不知道如何在每个组件中使用此信息来正确设置用户限制。我应该怎么做才能实现这一目标？

Answer 1

只需将令牌存储在本地存储中，并在您的路由器中使用受保护的包装器来路由。如果令牌不存在或已过期，则将重定向返回到 Login.js。

处理它的最佳方法是使用像 Auth0 这样的身份和 Auth 提供者，并阅读他们的文档以了解 React 应用程序。开箱即用地设置和实现您想要做的事情真的很容易。

这是我的应用程序中的一个示例：

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <AuthContext.Consumer>
      {auth => (
        <Route
          {...rest}
          render={props => {
          
            if (!auth.isAuthenticated()) return auth.login();
            
            return <Component auth={auth} {...props} />;
          }}
        />
      )}
    </AuthContext.Consumer>
  );
}

Answer 2

您必须将令牌保存在本地存储中，这样每当用户刷新页面时，令牌仍然存在。

   const handleSubmit = async e => {
        e.preventDefault();
        const response = await fetch('server/auth/login', options);
        const {token} = await response.json();
        setCookie('token', token, { path: '/' });

        localStorage.setItem('token', token);
    };


    // Check if token exists
    const token = localStorage.getItem('token');
    if (token && token !== '') {
        return <Redirect to="/admin" />;
    }

    return <form onSubmit={handleSubmit}>...</form>

请注意，在实际允许用户访问您的管理页面之前，您仍然必须在服务器端脚本上验证该令牌。

Answer 3

您首先要做的是通过检查本地存储/cookie 中的令牌来检查用户是否经过身份验证。如果是这样，允许用户继续他们访问过的路线，如果没有将他们重定向回登录屏幕（或错误屏幕）。通常，React 用户使用路由库，例如 react-router-dom。在该站点的文档中，他们讨论了如何进行身份验证。快乐编码https://reacttraining.com/react-router/web/example/auth-workflow