登录表单无法使用基于用户角色的身份验证和重定向呈现

Question

I am working on a small project that is a simple page with admin role and dashboard. I have user authentication and authorization with JWT token. My issue is that my Login.js form is faling to render whene there is no token that have user.role So my code looks like this: Login.js

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';

import { API_URL } from '../../../config';

import { authenticateUser, isAuthUser } from '../../../utils/utils';
import Layout from '../../layout/MainLayout/Layout';
import Button from '../../common/Buttons/Button';

class Login extends Component {
  state = {
    formData: {
      email: '',
      password: '',
    },
    userRedirect: false,
  };

  signIn = (user) => {
    const config = {
      headers: {
        'Content-Type': 'application/json',
      },
    };

    console.log('user axios', user.role);
    axios
      .post(`${API_URL}/login`, user, config)
      .then((res) => authenticateUser(res.data));
    this.setState({
      formData: { email: '', password: '' },
      userRedirect: true,
    });
  };

  onChange = (e) => {
    const { formData } = this.state;
    //assign form data to new variable
    let newFormData = { ...formData };
    newFormData[e.target.name] = e.target.value;
    this.setState({
      formData: newFormData,
    });
  };

  onSubmit = (e) => {
    const { password, email } = this.state.formData;
    e.preventDefault();
    this.signIn({ email, password });
  };

  formRender = (email, password) => (
    <form onSubmit={this.onSubmit}>
      <div className='form-group'>
        <label className='text-muted'>Email</label>
        <input
          type='email'
          name='email'
          value={email}
          onChange={this.onChange}
          className='form-control'></input>
      </div>
      <div className='form-group'>
        <label className='text-muted'>Password</label>
        <input
          type='password'
          name='password'
          minLength='6'
          value={password}
          onChange={this.onChange}
          className='form-control'></input>
      </div>
      <Button type='submit'>Login</Button>
    </form>
  );

  redirectUser = () => {
    const { userRedirect } = this.state;
    const { user } = isAuthUser();
    if (userRedirect === true) {
      console.log('user role', user.role);
      console.log('auth fuc', isAuthUser());
      if (user.role === 2308) {
        return <Redirect to='/admin/dashboard' />;
      } else {
        return <Redirect to='/users/me' />;
      }
    }
  };

  render() {
    const { email, password } = this.state.formData;
    return (
      <Layout title='Login Form' description='Login to your account'>
        {this.formRender(email, password)}
        {this.redirectUser()}
      </Layout>
    );
  }
}

export default Login;

Login form is working. All is getting messy when I am trying to get my role. Bu i have done some console logs, and redirectUser there is a user.role as it should based on user that is loging in.

I have two functions in utils.js, where I am checking if user is authenticated and if there is a JWT in local storage:

export const authenticateUser = (data) => {
  if (typeof window !== 'undefined') {
    localStorage.setItem('jwt', JSON.stringify(data));
  }
};

//check if user is auth and there is jwt item in localstorage. menu render
export const isAuthUser = () => {
  if (typeof window == 'undefined') {
    return false;
  }
  if (localStorage.getItem('jwt')) {
    return JSON.parse(localStorage.getItem('jwt'));
  } else {
    return false;
  }
};

I did get that, my error comes from

 <Layout title='Login Form' description='Login to your account'>
        {this.formRender(email, password)}
        {this.redirectUser()}
      </Layout>

this.redirectUser() get me that role undefined. But i have no clue how i can get this working. From console logs I am getting user role.

Thanks for help

Answer 1

It seems that when there is no token in localStorage you are destructuring from a boolean . Here is what I mean:

redirectUser = () => {
  const { userRedirect } = this.state;
  const { user } = isAuthUser();        // isAuthUser() returns false when there is no jwt in the localStorage
  if (userRedirect === true) {
    console.log("user role", user.role);
    console.log("auth fuc", isAuthUser());
    if (user.role === 2308) {
      return <Redirect to="/admin/dashboard" />;
    } else {
      return <Redirect to="/users/me" />;
    }
  }
};

You should at least check your result before destructuring. Try this:

redirectUser = () => {
  const { userRedirect } = this.state;
  const authData = isAuthUser();

  if (authData === false) {      // if jwt is not in localStorage

    return <Redirect to="/sign-in-path-in-your-app" />;

  } else if (userRedirect === true) {
    const { user } = authData;   // perform destructuring because here authData is not false but an object
    console.log("user role", user.role);
    console.log("auth fuc", isAuthUser());
    if (user.role === 2308) {
      return <Redirect to="/admin/dashboard" />;
    } else {
      return <Redirect to="/users/me" />;
    }
  }
};