在 useEffect 之后在 React 路由器 dom 中渲染路由

Question

我需要在 useEffect 檢查用戶是否具有所需角色之后渲染組件，但它總是重定向我，因為它首先執行渲染 function 然后執行 useEffect

這是我的代碼：

import { Route, Redirect } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { checkIfUserHasRequiredRole } from '../../utility/utility';
import PathConst from '../../utils/PathConst';

const AuthRoute = ({
  Component, path, exact = false, isAuthenticated, requiredRoles,
}) => {
  const [userHasRequiredRole, setUserHasRequiredRole] = useState(false);
  const roles = useSelector((state) => state.role.roles);
  const isAuthed = isAuthenticated;

  useEffect(() => {
    if (roles) {
      const userRole = checkIfUserHasRequiredRole(requiredRoles, roles);
      setUserHasRequiredRole(userRole);
    }
  }, [roles]);

  return (
    <Route
      exact={exact}
      path={path}
      render={() => (
        isAuthed && userHasRequiredRole ? (<Component />)
          : (
            <Redirect
              to={PathConst.toLoginPage}
            />
          ))}
    />

  );
};

export default AuthRoute;

function 'checkIfUserHasRequiredRole' 返回 true 但 'useHasRequiredRole' 在觸發 if 語句時仍然為 false。 我還嘗試使用相同的 useEffect function 沒有依賴關系。 我該如何管理它？

Answer 1

您可以進行設置，但這需要額外的渲染，以便userHasRequiredRole更新並生效。

由於您可以根據roles確定您需要什么，因此您可以，

import { useHistory } from "react-router-dom";

  const history = useHistory();

  useEffect(() => {
    if (roles) {
      const userRole = checkIfUserHasRequiredRole(requiredRoles, roles);
      if (this role is not good) {      
        history.push(PathConst.toLoginPage)
      }
    }
  }, [roles])