Question

我得到了一条类似这样的自定义路线：

import React from 'react';
import { Route } from 'react-router-dom';

import { AuthenticationContext } from '../../contexts/authentication/context';

import Unauthorized from '../Unauthorized';

import axios from 'axios';

const ProtectedRoute = ({ component: Component, redirect: Redirect, contextProvider: ContextProvider, path, ...routeProps }) => {

  const { authenticationState: {isAuthenticated, isFetchingTheUser, currentUser} } = React.useContext(AuthenticationContext)

  const [authorized, setAuthorized] = React.useState([]);
  const [isFetchingAuthorizations, setIsFetchingAuthorizations] = React.useState(false);

  React.useEffect(() => {
    console.log("useEffect from protected route")

    setIsFetchingAuthorizations(true);
    axios.get(`${global.REST_API_ADDR}/api/pages/${encodeURIComponent(path)}`)
    .then((response) => {
      setAuthorized(response.data.authorized);
      setIsFetchingAuthorizations(false);
    })
    .catch((error) => {
      setIsFetchingAuthorizations(false);

      // console.log("Protected route use Effect error : ", error);
    })
  }, [path])


  return (
    <Route {...routeProps}
      render={ props => {

        if(isFetchingTheUser || isFetchingAuthorizations) return <div>Chargement...</div>
        console.log("authorized =", authorized)
        console.log("current user rank = ", currentUser.rank)
        if(isAuthenticated && authorized.includes(currentUser.rank)){
          console.log("does it trigger ???")
          return ContextProvider ? <ContextProvider><Component {...props} /></ContextProvider> : <Component {...props} />
        }else if(isAuthenticated && !authorized.includes(currentUser.rank)) {
          return <Unauthorized {...props} />;
        }
        else{
          return <Redirect {...props}/>;
        }
    }}/>
  );

};

export default ProtectedRoute;

我想知道在路由使用它返回组件之后是否可以重置“授权”状态？我想这样做是因为每次我的用户导航到另一个页面时，它都会加载先前的“授权”数组并触发此if语句

if(isAuthenticated && authorized.includes(currentUser.rank)){
          console.log("does it trigger ???")
          return ContextProvider ? <ContextProvider><Component {...props} /></ContextProvider> : <Component {...props} />
        }

导致做出反应，试图渲染未安装的组件...

那么，使用后是否可以将“授权”阵列重置为空阵列？

预先感谢

编辑1：似乎在（快速路由交换机）中使用路由或自定义路由时，它不会重新安装组件，而是重新使用它。如果您向此快捷“ Switch”的每个子代添加不同的键，则可以正常工作，但是有更好的解决方案吗？我应该以不同的方式处理我的授权吗？任何提示都表示赞赏

有效：

<Switch>
    <ProtectedRoute key="2" path='/nonconformities' component={ReworkManager} redirect={UserLoginForm} contextProvider={ReworkManagerContextProvider} />
    <ProtectedRoute key="1" path='/protected' component={Protected} redirect={UserLoginForm} contextProvider={ReworkVisualizerContextProvider} />
</Switch>

不工作：

<Switch>
    <ProtectedRoute path='/nonconformities' component={ReworkManager} redirect={UserLoginForm} contextProvider={ReworkManagerContextProvider} />
    <ProtectedRoute path='/protected' component={Protected} redirect={UserLoginForm} contextProvider={ReworkVisualizerContextProvider} />
</Switch>

使用完是否可以清除useState变量？

0 个答案: