路由增加验证

• 判断一下 要是有token 就放行

routes/modules/auth.tsx

import { Navigate, Outlet, useLocation } from "react-router-dom";

/** 路由守卫：校验 localStorage 中的 token，无 token 则重定向到登录页 */
export default function AuthGuard() {
  const location = useLocation();
  const token = localStorage.getItem("token");

  // token 为空或 undefined 时，记录当前路径并跳转到登录页
  if (!token) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return <Outlet />;
}

增加需要验证的页面

• views/user/index.tsx 写一个基础的

• views/blog/index.tsx 写一个基础的

• view/home/index.tsx 写一个基础的

import HomePage from "@/views/home";
import LoginPage from "@/views/login";
import ErrorPage from "@/views/error";
import { Navigate } from "react-router-dom";
import AuthGuard from "./auth";
import LayoutPage from "@/layouts";
// 引入user模块
import UserPage from "@/views/user";
// 引入blog模块
import BlogPage from "@/views/blog";

const commonRoutes = [
  {
    // 需要认证的路由：由 AuthGuard 统一拦截
    element: <AuthGuard />,
    children: [
      {
        path: "/",
        element: <LayoutPage />,
        children: [
          {
            path: "/",
            element: <HomePage />,
          },
          {
            path: "/user",
            element: <UserPage />,
          },
          {
            path: "/blog",
            element: <BlogPage />,
          },
        ],
      },
    ],
  },
  {
    // 公开路由：无需 token
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "*",
    element: <Navigate to="/404" />,
  },
  {
    path: "/404",
    element: <ErrorPage />,
  },
];

export default commonRoutes;