isAuthenticated 始终为空答案

【问题标题】：isAuthenticated is always nullisAuthenticated 始终为空
【发布时间】：2021-12-28 10:51:18
【问题描述】：

isAuthenticated 始终为空

我正在尝试比较令牌是否过期，但 isAuthenticated 始终为空

import React, {useEffect, useState} from 'react';
import {Navigate} from 'react-router-dom'
import jwtDecode from "jwt-decode";

interface IPrivateRoute {
    children: React.ReactNode;
}

const PrivateRoute = ({children}: IPrivateRoute) => {
    const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)

    useEffect(() => {
        let token = localStorage.getItem('token')
        if (token) {
            let decodedToken:number = jwtDecode<any>(token).exp;
            let date:number = new Date().getTime() / 1000;
            console.log(decodedToken <= date)
            if (decodedToken <= date) {
                setIsAuthenticated(true)
            } else {
                setIsAuthenticated(false)
            }
        } else {
            setIsAuthenticated(false)
        }
    })

    return (
        <>
            {isAuthenticated ? children : <Navigate to='/login'/>}
        </>
    );
};

export default PrivateRoute;

【问题讨论】：

我认为您的日期检查有问题，您可能混淆了秒数和毫秒数
console.log(decodedToken <= date) 是否打印布尔值？
@PierreJanineh，是的
您可能只需要在每行末尾添加分号。
@PierreJanineh，我认为这不会有帮助）

标签： reactjs react-hooks react-router

【解决方案1】：

我认为问题在于 isAuthenticated IS null 在初始渲染上，这是一个错误值，并且导航到 "/login" 发生，卸载此 PrivateRoute 包装组件。 useEffect 永远不会在组件仍处于挂载状态时将状态更新为任何有意义的值。

您可能有几个选择：

在isAuthenticated 状态稳定时有条件地不渲染任何内容（或加载指示器等......）然后有条件地渲染@987654327 @ 或Navigate。

const PrivateRoute = ({ children }: IPrivateRoute) => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);

  useEffect(() => {
    const token = JSON.parse(localStorage.getItem('token'));
    if (token) {
      const decodedToken: number = jwtDecode<any>(token).exp;
      const date: number = new Date().getTime() / 1000;

      setIsAuthenticated(decodedToken <= date);
    } else {
      setIsAuthenticated(false);
    }
  });

  if (isAuthenticated === null) return null;

  return isAuthenticated ? children : <Navigate to='/login' replace />;
};

提供一个状态初始化函数，以提供您在初始渲染中寻找的有效布尔值 true|false isAuthenticated。

const initializeState = () => {
  const token = JSON.parse(localStorage.getItem('token'));
  if (token) {
    const decodedToken: number = jwtDecode<any>(token).exp;
    const date: number = new Date().getTime() / 1000;

    return decodedToken <= date;
  }
  return false;
};

...

const PrivateRoute = ({ children }: IPrivateRoute) => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(initializeState);

  useEffect(() => {
    const token = JSON.parse(localStorage.getItem('token'));
    if (token) {
      const decodedToken: number = jwtDecode<any>(token).exp;
      const date: number = new Date().getTime() / 1000;

      setIsAuthenticated(decodedToken <= date);
    } else {
      setIsAuthenticated(false);
    }
  });

  return isAuthenticated ? children : <Navigate to='/login' replace />;
};

【讨论】：