时间戳

首页 > 解决方案 > React.js：登录时如何获取并显示当前用户？

reactjs - React.js：登录时如何获取并显示当前用户？

问题描述

在我的React 应用程序中，我正在使用user login。我的目标是在用户登录时显示当前用户的用户名。我在redux 操作中获取用户数据，并且在遵循一些教程时，我需要在 fetch 函数中从后端获取 jwt 令牌。在登录获取函数中，我试图获取并保存令牌（请参阅获取函数），但它在 devtools/localStorage 中显示未定义。这就是 Reducers 中 LoginSuccess 中 InitialState 的更新方式。

state 
{user: {…}, loading: true, error: "", isAuthenticated: false, users: {…}}
error: ""
isAuthenticated: false
loading: true
user: {user: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dnZWRVc…xMTB9.hNsYTKGYIFRsPXw66AhB1o0EXyyfgfRTzOFzqBfjaTg"}
users: {user: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dnZWRVc…xMTB9.hNsYTKGYIFRsPXw66AhB1o0EXyyfgfRTzOFzqBfjaTg"}
__proto__: Object

我不知道如何访问当前登录的用户数据：例如用户名或名字。
任何帮助将不胜感激。

行动

import axios from 'axios'
import { Dispatch } from 'redux'

import {
  FETCH_USER_REQUEST,
  UserActions,
  User,
  LOGIN_USER_SUCCESS,
  FETCH_LOGIN_FAILURE,
  LOGOUT,
} from '../../types/UserType'

export const fetchUserRequest = () => {
  return {
    type: FETCH_USER_REQUEST,
  }
}

export const fetchLoginFailure = (error: UserActions) => {
  return {
    type: FETCH_LOGIN_FAILURE,
    payload: error,
  }
}

export function logout(): UserActions {
  return {
    type: LOGOUT,
  }
}

export function loginSuccess(user: User): UserActions {
  return {
    type: LOGIN_USER_SUCCESS,
    payload: {
      user,
    },
  }
}

export const login = ({ email, password }: any) => {
  return (dispatch: Dispatch) => {
    dispatch(fetchUserRequest())
    axios
      .post('http://localhost:8000/logIn', {
        email: email,
        password: password,
      })
      .then((response) => {
        const users = response.data
          dispatch(loginSuccess(users))
          localStorage.setItem('jwt', users.auth_token)
          console.log('users', users) // undefined
    })
      .catch((error) => {
        dispatch(fetchLoginFailure(error.message))
      })
  }
}

减速器

import {
  LOGIN_USER_SUCCESS,
  UserActions,
  UserState,
  LOGOUT,
} from '../../types/UserType'

const initialState: UserState = {
  user: {},
  loading: false,
  error: '',
  isAuthenticated: false,
}

const UserReducer = (state = initialState, action: UserActions) => {
  switch (action.type) {
  case LOGIN_USER_SUCCESS:
    console.log('state', state) // initialState update see above
    return {
      ...state,
      loading: false,
      user: action.payload,
      users: action.payload,
      isAuthenticated: true,
      error: '',
    }
  case LOGOUT:
    return {
      ...state,
      isAuthenticated: false,
      user: null,
      users: [],
    }
  default:
    return state
  }
}

export default UserReducer

我假设我将在注销组件中显示用户 userName 或 firstName

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { Icon, Button } from 'semantic-ui-react'

import { logout } from '../../../redux/User/UserActions'
import { AppState } from '../../../types'

function Logout() {
    const dispatch = useDispatch()
    const user = useSelector((state: AppState) => state.user.user)
    console.log('user', user)

    const logoutOnClick = () => {
        dispatch(logout())
        localStorage.clear()
    }
    return (
        <Button
            color="black"
            as={Link}
            to="Login"
            name="logout"
            onClick={logoutOnClick}
        >
            <Icon name="sign out"> </Icon>Logout
        </Button>
    )
}

export default Logout

标签： reactjsreduxlocal-storage

解决方案

您将登录的数据保存到 localStorage，就像您所做的 auth_token 一样，并在注销功能中清除。

 axios
      .post('http://localhost:8000/logIn', {
        email: email,
        password: password,
      })
      .then((response) => {
        const users = response.data
          dispatch(loginSuccess(users))
          localStorage.setItem('jwt', users.auth_token)
          localStorage.setItem('user', JSON.stringify(users))
          console.log('users', users) // undefined
    })
      .catch((error) => {
        dispatch(fetchLoginFailure(error.message))
      })

并访问您的注销组件或您需要的任何地方

let userDetails = JSON.parse(localStorage.getItem('user'));

并在注销功能中清除它

const logoutOnClick = () => {
        dispatch(logout())
        localStorage.clear() // already clearing
    }

推荐阅读