How to check what type of user is currently logged in my react app? Using redux toolkit for my state managment

Question

So I am building an HR app in React, and what I currently need to do is check what type of user is logged in, in order to conditionaly render what that type of user can see. I have no idea what logic to implement here. I know I have to declare a function and call it useEffect, but I dont know how to beggin. Below I will paste my redux user slice:

export interface AuthUser {
  id: number
  name: string
  roles: Array<'admin' | 'group_admin' | 'employee'>
  teams?: string[]
  token?: string
}

xport const authSlice = createSlice({
  name: 'auth',
  initialState,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    addTeam: ({ user }, action: PayloadAction<string>) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      user = user
        ? {
            ...user,
            teams: user.teams ? [...user.teams, action.payload] : [action.payload]
          }
        : null
    },
    logout: (state) => {
      state.user = null
    }
  },
  // The `extraReducers` field lets the slice handle actions defined elsewhere,
  // including actions generated by createAsyncThunk or in other slices.
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => {
        state.status = 'loading'
      })
      .addCase(login.fulfilled, (state, action) => {
        state.status = 'idle'
        state.validationErrors = []
        localStorage.setItem('token', action.payload?.token ?? '')
        state.user = action.payload
      })
      .addCase(login.rejected, (state, action) => {
        state.status = 'empty'
        state.validationErrors = action.payload as ValidationMessage[]
      })
  }
})

I need to implement my logic inside my navigation bar, which I think is not relevent for me to post. Any help on how to beggin is accepted, thanks in advance

Answer 1

I think your user should have a role property where he will have one of <'admin' | 'group_admin' | 'employee'> <'admin' | 'group_admin' | 'employee'> <'admin' | 'group_admin' | 'employee'> values, and currently it seems that you have an array of roles in user.

So first of all, make user receive some role from backend after login, then get this user object or user role by selector and after just conditionally render anything you need like:

{user.role === ROLES.admin ? <AdminComponent /> : <SomeOtherComponent />}

Or

{user.role === ROLES.admin && <AdminComponent />}

Or in any other way, thats just a few examples