如何处理身份验证
我正在尝试加入后端(Express JS)和前端(React )。现在，我正试图了解如何处理会话管理。
当用户使用用React制作的表单登录时，后端返回一个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>
};我不知道如何在每个组件中使用这些信息来正确设置用户限制。要做到这一点，我应该做些什么呢？
回答 3
Stack Overflow用户
发布于 2020-02-27 05:03:23
您想要做的是首先通过检查本地存储/ cookie中的令牌来检查by用户是否经过身份验证。如果是这样的话，允许用户继续进行他们访问过的路由，如果没有将它们重定向回登录屏幕(或错误屏幕)。通常，routing用户使用路由库(如react-router-dom )。在站点的文档中，他们研究了如何进行身份验证。快乐编码https://reacttraining.com/react-router/web/example/auth-workflow
Stack Overflow用户
发布于 2020-02-27 04:53:51
只需将令牌存储在本地存储中，并在路由器中使用受保护的包装器进行路由。如果令牌不存在或过期，则将重定向返回到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>
);
}
Stack Overflow用户
发布于 2020-02-27 05:01:17
您必须将令牌保存在本地存储中，以便每当用户刷新页面时，令牌仍然存在。
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>注意到，在实际允许用户访问您的管理页面之前，您仍然必须在服务器端脚本上验证该令牌。
https://stackoverflow.com/questions/60426338
复制相似问题
腾讯云开发者
