React 首先给出 null 值，一段时间后值被初始化

Question

我正在尝试创建一个组件以进行验证，无论是否对用户进行身份验证。 但是，我不是要重定向登录，但是，当我检查是否已进行身份验证时，首先是null，2000毫秒后的会话表示已进行身份验证。

app.js

    function App() {
    
     const session = useSelector((state) => state.user.user);
useEffect(() => {
    if (token) {
      axios
        .get(`http://localhost:4500/api/user/current`, {
          headers: {
            token: token,
          },
        })
        .then((res) => {
          dispatch(login(res.data));
        });
    } else {
      dispatch(logout());
      console.log("no token");
    }
  }, []);
    
      
      console.log(session?.role + " XX S"); //first goes null and then after it is initialized
    
      return (
    
     <Route
                element={
                  <RequireAuth allowedRoles={[3]} session_role={session?.role} /> //session?.role first is null and it is a problem with the logic of validation
                }
              >
                <Route path="/protected" element={<Protected />} />
              </Route>
    
    )

    const RequireAuth = ({ allowedRoles, session_role }) => {
  const session = useSelector((state) => state.user.user);
  const location = useLocation();

  console.log(session_role + " ROLE ");

  return session_role?.find((role) => allowedRoles?.includes(role)) ? (
    <Outlet />
  ) : session ? (
    <Navigate to="/unauthorised" state={{ from: location }} replace />
  ) : (
    <Navigate to="/login" state={{ from: location }} replace />
  );
};

export default RequireAuth;

需要

export const userSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
    isLoggedIn: false,
  },
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
      state.isLoggedIn = true;
    },
    logout: (state) => {
      state.user = null;
      state.isLoggedIn = false;
    },
  },
});

/I.SSTATIC.NET/XQ1QN.png“ rel =” nofollow noreferrer“>

Answer 1

function App() {
  const dispatch = useDispatch();
  let token = 1;
  useEffect(() => {
    async function initializeToken() {
      if (token) {
        setTimeout(() => {
          dispatch(login({
            user: {
              id: 'id',
              name: 'name',
              surname: 'surname',
              email: 'email',
              role: 'role',
            },
          }))
        }, 2000);
      } else {
        dispatch(logout());
        console.log("no token");
      }
    }
    initializeToken();
  }, [dispatch]);

  const session = useSelector((state) => state.user);

  const sessionObject = session ? JSON.parse( JSON.stringify(session)) : null ;
  console.log(sessionObject, 'sessionObject');

  const isAuth = sessionObject ? sessionObject.isLoggedIn : null ;
  console.log(isAuth + "isAuth");
  const role = sessionObject ? sessionObject.user && session.user.user ? session.user.user.role : null : null
  console.log(role, 'role')


  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route exact path="login" element={<Login />} />
          <Route exact path="unauthorised" element={<Unauthorised />} />
          <Route
            element={
              <RequireAuth allowedRoles={[3]} session_role={session?.role} />
            }
          >
            <Route path="/protected" element={<Protected />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

使用 setTimeout 而不是 api ，它可以模拟相同的东西。 null 背后的原因是解析数据，而不是我认为的初始状态。上面的代码应该可以解决问题。