可以使用useEffect来检查用户token是否存在于localStorage中吗？

Question

我目前正在开发一个具有身份验证功能的 Web 应用程序，我想知道作为私有路由该怎么做。在我的某个页面的 useEffect 中设置一个条件是否是一种好方法，我想知道令牌是否存在？

例如：

import {useEffect} from "react";
import {useNavigate} from "react-router-dom";


function Dashboard() {

    const token = localStorage.getItem("token")
    const navigate = useNavigate()

    useEffect(() => {
        if (!token) {
            navigate("/login")
        } else {
            fetchAPI ........
        }
    }, []);

    return (
    )
}

export default Dashboard

Answer 1

如果您的目标是让用户注销，无论他在哪里，那么我建议使用

<outlet/>

组件。

import {useEffect} from "react";
import {useNavigate} from "react-router-dom";
import { Outlet } from "react-router-dom";


function ProtectedRoute() {

    const token = localStorage.getItem("token")
    const navigate = useNavigate()

    useEffect(() => {
        if (!token) {
            navigate("/login")
        } else {
            fetchAPI ........
        }
    }, []);

    return (
      <Outlet/>
    )
}

export default ProtectedRoute

无论在哪里处理您的路线，您基本上都会将子级包裹在这个

<ProtectedRoute/>

组件中。它看起来像这样：

<Route element={<ProtectedRoute/>}>
 <Route path="/dashboard" element = {<Dashboard/>}
</Route>

通过这样做，您基本上减少了为执行相同检查而编写的代码量。每次您导航到不同的页面时，都会触发此 useEffect。当然，您也可以开始实施

useContext

和

createContext

钩子，以免进行大量的螺旋钻探。另一个很大的帮助是您可以使用

ProtectedRoute

组件作为布局组件。如果您有

sidebar

或

navbar

或任何需要在每个页面上显示的内容，这也是一个很好的方法。希望这有帮助！