reactjs - 大家好，一旦他们登录到网站，我如何在导航栏上显示用户名？

问题描述

我已经设法让我的用户注册并且他们能够登录到该网站。他们的个人信息存储在猫鼬上，我可以看到。如果用户未注册，他们将无法登录，只有注册后才能登录。当他们登录时，如何在人员图标的导航栏中显示他们的姓名以及何时他们只注销了图标显示？

这是代码。

页眉.js

import React from 'react'
import '../styling/Header.css'
import { Link } from 'react-router-dom';
import SearchIcon from '@material-ui/icons/Search';
import ShoppingBasketIcon from '@material-ui/icons/ShoppingBasket';
import PersonIcon from '@material-ui/icons/Person';
import { useSelector, useDispatch } from 'react-redux';
import logo from '../media/logo.png';


function Header({ click }) {
    const cart = useSelector((state) => state.cart);
    const { cartItems } = cart;
    
    const getCartCount = () => {
        return cartItems.reduce((qty, item) => Number(item.qty) + qty, 0);
    };
    return (
        <nav className='header'>
            <Link to="/">
                <div className="header_logo">
                    <img src={logo} /> 
                </div> 
            </Link>
            <ul className='header_links'>
                <li>
                    <Link to='/men'>
                        <span>Men</span>
                    </Link>
                </li>
                <li>
                    <Link to='/women'>
                        <span>Women</span>
                    </Link>
                </li>   
            </ul>

            <div className='header_links2'>
                <div className="header_search">
                    <input type="text" className="header_searchInput"/> 
                    <SearchIcon className ="header_searchIcon"/>  
                </div>
                    <ul>
                        <li>
                            <Link to='/login' className='header_login'>
                                <PersonIcon />
                            </Link>
                        </li>
                        <li>
                            <Link to='/basket' className>
                                <ShoppingBasketIcon />
                            <span className="header_basketCount" >{ getCartCount()}</span>
                            </Link>
                        </li>      
                </ul>
                
            </div>
            <div onClick={ click} className='header_ham_menu'>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
        </nav>
    )
}

export default Header

import React, { useState } from 'react'
import logo from '../media/logo.png';
import { Link, useHistory } from 'react-router-dom';
import axios from 'axios'

import "../styling/Login.css"
function Login() {
    const [user, setUser] = useState({
        email: '',
        password: ''
    })
    const onChangeInput = e => { 
        const { name, value } = e.target;
        setUser({...user, [name]: value})
    }
    const submitLogin = async e => { 
        e.preventDefault()
        try {
            await axios.post('/user/login', { ...user })
            localStorage.setItem('login', true)
            window.location.href='/'  
        } catch (error) {
            alert(error.response.data.msg)  
        }
    }
    return (
        <div className="login">
            <Link to ='/'>
                <img className="login_logo"
                    src={logo}
                />
            </Link>
            <div className="login_container">
                <h1>Sign in</h1>
            
                <form onSubmit={ submitLogin}>
                    <h5>E-Mail</h5>
                    <input
                        name='email'
                        type="email"
                        value={user.email}
                        onChange={onChangeInput}
                        placeholder = 'E-mail'
                    />              
                    <h5>Password</h5>
                    <input
                        name='password'
                        type="password"
                        value={user.password}
                        onChange={onChangeInput}
                        placeholder = 'Password'
                    />
                    
                    <button type='submit' className="login_signinbtn">Log In</button>
                </form>
                <p>
                    By signing in you agree to the website condisions of use and sale. 
                    Please see our Privacy notice, our cookies notice and our interest Based
                    Ads Notice
                </p>
                <button className="login_regbtn">
                    <Link to='/register'>
                    Create an  Account
                    </Link>
                </button>
            </div>
        
        </div>
    )
}
export default Login

标签： reactjsauthenticationmongoose

reactjs - 大家好，一旦他们登录到网站，我如何在导航栏上显示用户名？

问题描述

解决方案

推荐阅读