时间戳

首页 > 解决方案 > 认证通过后输入新的 React 组件

javascript - 认证通过后输入新的 React 组件

问题描述

因此，我正在尝试创建页面，只有在您登录帐户时才能看到所有信息。我用 NodeJS 创建了身份验证系统，现在我想要它，这样你就只能在通过身份验证时输入某些组件（页面）。也许有人可以建议某种教程或举个例子我该怎么做？

我的登录组件：

import React, { useState } from 'react';
import axios from 'axios';
const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const onChangeUsername = (e) => {
    setUsername(e.target.value);
    }
    const onChangePassword= (e) => {
     setPassword(e.target.value);
    }
    const onSubmit = (e) => {
        const user = {
            username: username,
            password: password
            };
        e.preventDefault();
        const authentication = axios.post('http://localhost:5000/users/login', user);
        if(authentication === true) window.location = '/user';
        else console.log("ERORR")
        
    }
        
    
    return (
        <div className="Login">
           <h2>Traffic scan admin panel</h2>
           <div className="LoginInfo-Logins">
            <form>
                <input type="text"
                required
                className=""
                value={username}
                onChange={onChangeUsername}
                placeholder="Username*" 
                />
                <input type="text"
                required
                className=""
                value={password}
                onChange={onChangePassword}
                placeholder="Password*" 
                /> 
            </form>
           </div>
           <button onClick={onSubmit}>SIGN IN</button>
        </div>
    )
}
export default Login;

我用于登录的 NodeJS 部分：

router.route('/login').post(async (req, res) => {
    const user = await Users.findOne({username: req.body.username});
    if(!user) throw Error('User do not exist')
    else {
        if(await bcrypt.compare(req.body.password, user.password)) {
            console.log('Logged in');
            res.send('Logged in');
        } else throw Error('Password is incorrect')
    }
});

标签： javascriptnode.jsreactjsauthenticationcomponents

解决方案

如果您使用 react-router 导航不同的页面，则可以使用 react 钩子 useHistory 导航到仪表板。当您从服务器获得响应时，您还需要保存您现在已登录的信息。

我建议使用 JWT 令牌执行此操作，因为它们也会过期，因此您无法在 X 时间后使用它们。这是一个很好的链接，可让您开始了解如何执行此操作。

然后，一旦您拥有令牌，您将需要配置您的路由器或其他显示内容的方式，只有在您拥有有效路由器的情况下才能这样做。作为旁注，请确保任何经过身份验证的操作都发生在服务器端而不是客户端。例如，获取http://127.0.0.1/login并接收回 {token: randomString, isAdmin: true} 然后存储 isAdmin 并使用它来做特定的事情是不行的。（请注意，可以将其用于显示目的，但不能用于任何可以让您查看或修改机密数据的东西，保留所有服务器端）

另请注意：我会确保输入错误的用户会显示与错误密码相同的错误（因此无法有人来枚举您网站上的所有用户）。并且还建议您使用Morgan之类的工具来跟踪一段时间内来自单个 IP 或单个用户的登录请求数量，并将它们添加到黑名单中，这样人们就无法暴力破解密码。

import React, { useState } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';

const Login = () => {
    let history = useHistory();
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const onChangeUsername = (e) => {
    setUsername(e.target.value);
    }
    const onChangePassword= (e) => {
     setPassword(e.target.value);
    }
    const onSubmit = (e) => {
        const user = {
            username: username,
            password: password
            };
        e.preventDefault();
        const authentication = axios.post('http://localhost:5000/users/login', user);
        if(authentication === true) history.push('/home');
        else console.log("ERORR")
        
    }
        
    
    return (
        <div className="Login">
           <h2>Traffic scan admin panel</h2>
           <div className="LoginInfo-Logins">
            <form>
                <input type="text"
                required
                className=""
                value={username}
                onChange={onChangeUsername}
                placeholder="Username*" 
                />
                <input type="text"
                required
                className=""
                value={password}
                onChange={onChangePassword}
                placeholder="Password*" 
                /> 
            </form>
           </div>
           <button onClick={onSubmit}>SIGN IN</button>
        </div>
    )
}
export default Login;

推荐阅读