非常简单?‍♂️

Question

我尝试为我的react应用程序中的路由实现逻辑。接下来是我的路线构想：
我的应用程序中有2个页面，并且有2个角色（用户和修订者），我想要：

如果用户访问该应用程序，则应在以下路线上将其重定向->“ / user”
如果用户尝试访问路由->“ / reviwer”，则应将其重定向到“ / 404”
如果reviwer访问该应用程序，则应在以下路线上将其重定向->“ / reviwer”
如果修改者尝试访问路由->“ / user”，则应将其重定向到“ / 404”
如果两个用户都尝试访问“ /登录”，并且他们都在应用程序中，则应按照自己的个人路线重定向

我尝试针对上述情况实施PrivateRoute：

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

    return (
        <Route
            path={path}
            {...rest}
            render={props => (
                localStorage.getItem('mytoken') !== 'undefined' && localStorage.getItem('mytoken')
                ? (
                     localStorage.getItem('role') !== "rev" ?
                         <Route path={'/user'} component={USER}/> :
                         <Route path={'/reviewer'} component={REV}/>

                    ) : (
                   <Redirect to={{pathname:'/login'}}/>
                )
            )}
        />
    );
};

...但是如果我以审阅者身份访问该应用程序，则条件是：

localStorage.getItem('role') !== "rev" ?
<Route path={'/user'} component={USER}/> :
<Route path={'/reviewer'} component={REV}/>...

不起作用，而且我无论如何都在“ /用户”路径上。
问题：如何更改代码以及如何实现上述编码？

Answer 1

非常简单?‍♂️

首先-您应保持路由器的清洁，以便在向其添加更多路由时，这些路由很容易理解。像这样

return <Router>
  <Switch>
    <UnAuthRoute path="/login"><LoginPage/></UnAuthRoute>
    <RoleRoute path="/user" role="user"><UserPage/></RoleRoute>
    <RoleRoute path="/reviewer" role="reviewer"><ReviewerPage/></RoleRoute>
  </Switch>
</Router>
};

现在，创建两个组件，一个组件-允许您根据角色进行重定向，另一个组件仅允许未经身份验证的请求到指定路径。

interface Props {
  redirectTo?: string;
  role?: string;
  path: string;
}

export const UnAuthRoute: React.FC<Props> = ({children, redirectTo, path}) => {
  const authenticated = !!localStorage.getItem('mytoken');
  const isReviewer = localStorage.getItem('role') === "rev";

  if (!authenticated) {
    return <Route path={path}>{children}</Route>
  } else {
    return <Redirect to={redirectTo || (isReviewer ? "/reviewer" : "/user")}/>
  }
};

export const RoleRoute: React.FC<Props> = ({children, redirectTo, path, role}) => {
  const authenticated = !!localStorage.getItem('mytoken');
  const allowed = localStorage.getItem('role') === role;

  if (!authenticated) return <Redirect to={redirectTo || "/login"}/>
  else if (allowed) return <Route path={path}>{children}</Route>;
  else return <Redirect to={redirectTo || "/404"}/>
};

根据条件使用反应路线

1 个答案:

非常简单?‍♂️