Question

我正在尝试构建一个基于角色的访问控制React应用。

我的愿景是在安装App时，它会检查用户令牌是否存在。如果是这样，它将运行checkAuthToken()并相应地设置状态。

我苦苦挣扎的是：重定向无法按我期望的那样工作。

这是我的代码：

在App.js

中

function App() {
  const { isAuthenticated, user } = useSelector(state => {
    return state.userState;
  });
  const dispatch = useDispatch();

  useEffect(() => {
    checkAuthToken();
  }, []);

  return (
    <Router>
      <Switch>
        <Route exact path='/'>
          {!isAuthenticated ? (
            <Redirect to='/login'/>
          ) : (
            <Redirect to={`/${user.role}`} />
          )}
        </Route>

        <Route
          path="/login"
          render={() => {
            return <Login />;
          }}
        />


        <Route
          path="/admin"
          render={() => {
            return <AdminDashboard user={user} />;
          }}
        />
        <Route
          path="/staff"
          render={() => {
            return <OrderMenu user={user} />;
          }}
        />
        <Route component={ErrorPage} />
      </Switch>
    </Router>
  );
}

export default App;

我的理解是当状态或道具发生变化时，React会重新渲染。当我从Redux获得更新后的状态时，应重新呈现应用程序组件，并因此进行isAuthenticated检查并相应地重定向，但是事实证明我错了。

当前，如果没有令牌，它将重定向到Login route。用户登录后，将在localStorage中设置令牌。因此，要对其进行测试，请关闭并打开一个新标签，尝试转到路径/，期望它将我重定向到/[admin|staff]路由，因为checkAuthToken将成功设置状态，但重定向不会不能正常工作，只能登陆/login。但是，如果手动输入，我可以访问/[admin|staff]。

验证用户身份后重定向

0 个答案: