title: Different user paths
body: <p>I am implementing a web application, where there is a few different roles which known as systemadmin and employees. System admin will be redirected to path starting as &quot;/admin/xxx&quot; while normal employees will be redirected to &quot;/employees/xxx&quot; after login.</p>
  <p>How do I ensure that after login as a system admin, I would not be able to access to employees path when I entered &quot;/employees/xx&quot; manually and vice versa?</p>
  <pre><code>const antIcon = (
    &lt;LoadingOutlined style={{ fontSize: 100, textAlign: &quot;center&quot; }} spin /&gt;
  );
  
  toast.configure();
  
  function AuthenticatedRoute({ component: C, appProps, propss, user, ...rest }) {
    return (
      &lt;Route
        {...rest}
        render={(props) =&gt; {
          if (!appProps.isAuthenticated) {
            if (propss.loading) {
              // console.log(typeof user);
              if (localStorage.length === 0) {
                toast.error(&quot;You have no authorization to access!&quot;);
                return &lt;Redirect to={{ pathname: &quot;/login&quot; }} /&gt;;
              } else {
                console.log(&quot;error&quot;);
              }
            }
          }
          if (propss.loading) {
            return (
              &lt;div style={{ textAlign: &quot;center&quot;, marginTop: &quot;250px&quot; }}&gt;
                &lt;Spin indicator={antIcon} /&gt;
              &lt;/div&gt;
            );
          }
  
          if (appProps.isAuthenticated) {
            return &lt;C {...props} {...appProps} /&gt;;
          }
        }}
      /&gt;
    );
  }
  export default AuthenticatedRoute;
  </code></pre>
  <hr />
  <pre><code>    &lt;Router history={history}&gt;
        &lt;Switch&gt;
          &lt;Route path=&quot;/:path?&quot; exact&gt;
            &lt;LoginContainer&gt;
              &lt;Route exact path=&quot;/&quot; component={() =&gt; &lt;Redirect to=&quot;/login&quot; /&gt;} /&gt;
              &lt;Route
                path=&quot;/login&quot;
                render={(props) =&gt; {
                  if (loading) {
                    return (
                      &lt;div style={{ textAlign: &quot;center&quot;, marginTop: &quot;250px&quot; }}&gt;
                        &lt;Spin indicator={antIcon} /&gt;
                      &lt;/div&gt;
                    );
                  } else if (!isAuthenticated) {
                    return &lt;Login {...props} setAuth={setAuth} /&gt;;
                  } else {
                    if (localStorage.getItem(&quot;designation&quot;) === &quot;System Admin&quot;) {
                      return (
                        &lt;Redirect
                          to=&quot;/admin/Dashboard&quot;
                          {...props}
                          setAuth={setAuth}
                        /&gt;
                      );
                    } else {
                      return (
                        &lt;Redirect
                          to=&quot;/employee/Dashboard&quot;
                          {...props}
                          setAuth={setAuth}
                        /&gt;
                      );
                    }
                  }
                }}
              /&gt;
              &lt;Route path=&quot;/forgot&quot; component={ForgotPassword} /&gt;
              &lt;Route path=&quot;/notFound&quot; component={NotFound} /&gt;
            &lt;/LoginContainer&gt;
          &lt;/Route&gt;
  
          &lt;UserContext.Provider value={{ user }}&gt;
            &lt;SiderProvider&gt;
              &lt;AuthenticatedRoute path=&quot;/admin/:path?&quot;&gt;
                &lt;SystemAdminContainer&gt;
                  &lt;Switch&gt;
                    
                    &lt;AuthenticatedRoute
                      path=&quot;/admin/Dashboard&quot;
                      appProps={{ isAuthenticated }}
                      propss={{ loading }}
                      component={Dashboard}
                      user={user}
                    /&gt;
  &lt;/Switch&gt;
                &lt;/SystemAdminContainer&gt;
              &lt;/AuthenticatedRoute&gt;
  
              &lt;AuthenticatedRoute path=&quot;/employee/:path?&quot;&gt;
                &lt;EmployeeContainer&gt;
                  &lt;Switch&gt;
                    &lt;AuthenticatedRoute
                      path=&quot;/employee/Dashboard&quot;
                      appProps={{ isAuthenticated }}
                      propss={{ loading }}
                      component={Dashboard}
                      user={user}
                    /&gt;
                  &lt;/Switch&gt;
                &lt;/EmployeeContainer&gt;
              &lt;/AuthenticatedRoute&gt;
            &lt;/SiderProvider&gt;
          &lt;/UserContext.Provider&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
  </code></pre>