role in frontend

Note: How to check debugger::

step01:  find the locatstoragessetItem:: 

step02:  find it in src/_services/user.service.js:

step 03: open it and do works.

    return fetch(`${BASE_URL}/sign_in`, requestOptions)

        .then(handleResponse)

        .then(user => {

            // store user details and jwt token in local storage to keep user logged in between page refreshes

            console.log("User Response", user.data)

              if (user && user.status === 200) {

                debugger

                console.log("aaaaaa", user.data)

                localStorage.setItem('user', JSON.stringify(user.data));

              }

            return user;

        });

}

Step 0A ::   make studentRoute.js in Router Folder

Step 0B  ::   Make with this code check it with the errorrs if any comes

import React from 'react'

import { Redirect, Route } from 'react-router-dom'

const StudentRoute = ({ component: Component, ...rest }) => {

  // Add your own authentication on the below line.

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

   const isLoggedIn = user ? true : false;

    const isAuthorized = user.student ? true : false;

    // const isStudent = (user.student_role == true) || (user.admin_role == true) || (user.superadmin_role == true) ? true : false;

    console.log("*************", user)

    const isStudent = user.student_role == true ? true : false;

    const isAdmin = user.superadmin_role == true ? true : false;

    debugger

    console.log("&&&&&&",  user.superadmin_role)

   // const isAuthorized = rest.roles && rest.roles[0] && rest.roles.includes(user.role)

  return (

    <Route

      {...rest}

      render={props =>

        isLoggedIn && isAuthorized && (isStudent || isAdmin)  ? (

          <Component {...props} />

        ) : (

          <Redirect to={{ pathname: '/', state: { from: props.location } }} />

        )

      }

    />

  )

}

export default StudentRoute  

Step0C::  In App.js::

In app.js start with studentroute except this with private

<StudentRoute exact path="/students/new" component={NewStudent} />

step 0D:: Give condition in this  with direct links to the / :: By this it will go to Homepage or Dashboard Page.

          <Redirect to={{ pathname: '/', state: { from: props.location } }} />

and check this in return

  return (

    <Route

      {...rest}

      render={props =>

        isLoggedIn && isAuthorized && (isStudent || isAdmin)  ? (

          <Component {...props} />

        ) : (

          <Redirect to={{ pathname: '/', state: { from: props.location } }} />

        )

      }

    />

        isLoggedIn && isAuthorized && (isStudent || isAdmin)  ? (

Note: will check the condition for this in the session controller