时间戳

首页 > 解决方案 > 我如何通过身份验证对路由做出明智的反应？

reactjs - 我如何通过身份验证对路由做出明智的反应？

问题描述

我遵循了 React 路由器 4 示例中的受保护路由，我使用该受保护方法登录。下一步是我想使用基于角色的路由，例如用户可以使用 /user 和 admin 可以使用 /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 }
            }}
          />
        )
      }
    />
  );
}

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

甚至我也想在全球范围内处理 /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>
    );
  }
}

标签： reactjsreact-router

解决方案

代替

 <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

推荐阅读