Question

我遵循了React Router 4示例中的受保护路由，我使用该受保护方法登录。下一步是我要使用基于角色的路由，例如，用户可以使用/ user，管理员可以使用/ admin页面。

class Routing extends Component {
    render(){
        return (
            <Switch>
                <Route path="/login" component={Login} />
                <PrivateRoute exact path="/" component={App} />
            </Switch>
        )
    }
}
function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

在该组件是用户/管理员的通用组件中，在检查了该组件中的用户/管理员角色之后，我想以用户身份重定向（如果该用户是用户或将是admin）。

我也想同时全局处理/ user路由器和/ admin路由器。

这是我尝试过的方法，但似乎不起作用...

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="">
          <h1>Payement</h1>
        </header>
        <div>
          <Route exact path='/user' component={User} />
          <Route exact path='/admin' component={Admin} />
          {
            localStorage.getItem('role') === 'user' &&
            <Redirect to={'/user'} />
          }
          {
            localStorage.getItem('role') === 'admin' &&
            <Redirect to={'/admin'} />
          }
        </div>
      </div>
    );
  }
}

Answer 1

替换

 <PrivateRoute exact path="/" component={App} />

使用

<PrivateRoute path="/" component={App} />

问题

这是由于未与exact道具一起考虑该路线。 exact条路线仅在路线完全匹配时才会考虑。

显然要以 Admin 身份登录，您必须修改Login组件，实际上仅以 User 身份登录。

login = () => {

          localStorage.setItem('role', this.uname.value);
          fakeAuth.authenticate(() => {
              this.setState({ redirectToReferrer: true });
            });
        };

其他说明

此外，如果我可以给我2美分，除非有必要，请避免使用 refs 。

检索输入值的正确方法就像

 <input onChange={(event) =>  this.setState({loginvalue: event.target.value})} />

然后从状态中检索它：

this.state.loginvalue

Answer 2

这将在路由文件中的单个文件中的所有路由之后起作用。

class Routing extends Component {
    render(){
        return (
            <Switch>
                <Route path="/login" component={Login} />
                <PrivateRoute exact path="/" component={App} />
                <PrivateRoute path='/user' component={User} />
                <PrivateRoute path='/admin' component={Admin} />
            </Switch>
        )
    }
}

并删除了app.js文件中的路由。

我该如何明智地对auth进行路由反应？

2 个答案: