React-router v6 路由守卫/导航守卫/路由拦截

实现思路：

通过创建一个高阶组件，在没有登录的情况下，跳转到login页面，否则就返回 请求的页面。

能够在没有登录的情况下（没有token），拦截路由跳转登录页面，

实现步骤：

创建AuthRouter.js 文件

文件中编写一个高阶组件，（高阶组件：接受的参数是一个组件，通过判断返回一个新的组件）

判断

有token的时候进入Home (主页)页面

没有token的时候跳转到登录页面

代码实现：

router/AuthRouter.js

// 路由守卫
// 判断token是否存在（如果存在跳转主页，如果不存在跳转登录页面）
import { Navigate } from "react-router-dom"

// 获取token方法
const getToken = () => {
    return localStorage.getItem("token")
}



// 创建一个高阶组件，高阶组件就是 把一个组件当做另一个组件的参数传入 然后通过判断 返回新的组件
// 下面的 AuthRouter 就是一个高阶组件

function AuthRouter( {children} ) {
    // 获取token
    const token = getToken()
    console.log(token,"agagag");
    // 判断token是否存在 存在直接渲染主页面
    if (token) {
        return <>{children}</>
    } else {
        return <Navigate to={'/login'}></Navigate>  //没有token跳转登录页面
    }
}
export { AuthRouter }

router/index.js

import { AuthRouter } from "./AuthRouter"  //引入高阶组件
import Login from "../pages/Login"
import Home from "../pages/Home"



const router = [
    {
        path: "/",
        element: <AuthRouter>
            <Home />
        </AuthRouter>
    },
    {
        path: "/login",
        element: <Login></Login>
    },
    {
        // 如果进/home页面, 进入 <AuthRouter/> 高阶组件进行判断，如果有token 返回 <Home/> 
        //没有token返回 <Navigate to={'/login'}></Navigate> 跳转登录页面
        path: "/home",
        element: <AuthRouter> 
            <Home />
        </AuthRouter>
    },
]

export default router