时间戳

首页 > 解决方案 > React JS 如何处理身份验证

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

问题描述

我正在尝试加入后端（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>
};

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

标签： javascriptnode.jsreactjsexpressjwt

解决方案

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

推荐阅读