javascript - React JS 如何处理身份验证

Question

我正在尝试加入后端(Express JS)和前端(React JS)。现在我正在尝试了解如何处理 session 管理。

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

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

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

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

您想要做的是首先通过检查本地存储/cookie 中的 token 来检查用户是否经过身份验证。如果是这样，则允许用户继续访问他们访问过的路线，如果没有，则将其重定向回登录屏幕(或错误屏幕)。通常，React 用户使用诸​​如 react-router-dom 之类的路由库。在网站的文档中，他们介绍了如何进行身份验证。快乐编码https://reacttraining.com/react-router/web/example/auth-workflow