Question

我这样做是为了保护 App.js 组件中的一些路由：

<Route path="/backoffice/utilizadores">
 {role && (role === ADMIN || role === MOD) ? (
    <BackOfficeUsers />
   ) : (
    <Redirect to="/backoffice" />
   )}
</Route>

如果我通过单击导航栏的 Link 之一进行导航，它工作正常，但是当我输入地址时，即使 role 是 ADMIN，它也会重定向我。
role 来自 redux 存储，它在我的 App.js 组件函数声明的开头声明：

const role = useSelector((state) => state.auth.role);

我认为这可能与 "" 加载时角色未定义或 Route 有关，但我不确定，我正在寻找一些见解和可能的解决方案。

Answer 1

请试试这个。

AdminRoute.jsx

import React from 'react';
import { useSelector } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

const AdminRoute = ({component: Component, ...rest}) => {
    const role = useSelector((state) => state.auth.role);
    // or const role = localstorage.getItem('role');

    return (

        // Show the component only when the user is logged in
        // Otherwise, redirect the user to /signin page
        <Route {...rest} render={props => (
            (role && (role === 'ADMIN' || role === 'MOD')) ?
                <Component {...props} />
            : <Redirect to="/backoffice" />
        )} />
    );
};

export default AdminRoute;

<AdminRoute path="/backoffice/utilizadores" component={BackOfficeUsers} />

Answer 2

这是一个客户端路由问题，所以基本上发生的情况是，当您访问网站上的某个页面而不是索引页面时，获取您的用户/角色的 javascript 没有执行。有几种方法可以解决这个问题，最简单的方法是使用哈希路由器。哈希路由器创建的 url 不是以 # 为前缀的索引页，并且它不会读取后面的任何内容，直到索引页代码尚未执行

编辑：或者，您可以查看这个问题，它比我能更好地解释它，所以希望它有帮助

React-router urls don't work when refreshing or writing manually

Answer 3

我通过在 App.js 中这样声明我的路线解决了这个问题：

<Route path="/backoffice/utilizadores">
 <BackOfficeUsers />
</Route>

并在我的导航栏组件上执行此操作：

const history = useHistory();
const role = useSelector((state) => state.auth.role);

useEffect(() => {
  if (
   history.location.pathname.includes("/backoffice/") &&
   (role !== "ADMIN" || role !== "MOD")
  ) {
    history.replace("/home");
  }
}, [history.location.pathname, role]);

我仍然不完全理解发生了什么以及为什么我以前的解决方案不能正常工作。

不应该时反应路由器重定向

3 个答案: