跳至主要內容

路由守卫全系列

程序员王天大约 1 分钟

hooks 版本

react hooks 全攻略open in new window

组件版本

  • history 监听路由变化,更新路由前进行权限校验
  • 使用内置 hooks useLocation来获取路径信息
// 路由鉴权组件 -
// 作用1:登录鉴权
// 作用2:实现路由重定向
import React from "react";
import * as Type from "../../../utils/type";
import { NavLink, Navigate, useLocation } from "react-router-dom";
import RouterConfig from "../../../router/routerConfig"; // 路由配置数据

// 查找当前路径的路由数据
const searchRoute = (path: string, routes: Type.RoterList) => {
  let reslut = {};
  for (const iterator of routes) {
    if (iterator.path === path && !iterator.children) return iterator;
    if (iterator.children) {
      const res = searchRoute(path, iterator.children);
      reslut = res;
    }
  }
  return reslut;
};

const AuthRoute = (props: any) => {
  // 实现路由重定向,判断下当前路由配置是否包含 属性to

  // 获取当前路由的配置数据
  const { pathname } = useLocation();
  console.log('useLocation()', useLocation())
  let routeData = searchRoute(pathname, RouterConfig) as any
  //   鉴权代码 --判断用户token、缓存信息,没有token跳转登录页,登录页无需校验token

  if (!localStorage.getItem('token') && pathname !== '/login') {
    window.location.href = '/login'
  }
  // 重定向
  if (routeData.to) {
    // 跳转重定向页面
    return <Navigate to={routeData.to}></Navigate>
  } else {
    return <>{props.children}</>
  }
};

export default AuthRoute;

使用 authRoute 路由守卫组件

// import RouteDom from "./router/routerView";
import { BrowserRouter, Link } from "react-router-dom";
// 引入路由组件
import RouteApp from "./router/routerView";// 引入路由守卫组件
import AuthRoute from "./components/common/authRoute";
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
    <Provider store={Stroe}>
  	  <BrowserRouter>
        	<AuthRoute>
            <RouteApp></RouteApp>
          </AuthRoute>
  	  </BrowserRouter>
    </Provider>
);

读者朋友好呀,我是王天~ 😊

尝试做过很多事情,半路出道的野生程序员、前端讲师、新手作者,最终还是喜欢写代码、乐于用文字记录热衷分享~

如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇‍

如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏

微信:「wangtian3111」,加我进王天唯一的读者群。

个人博客:https://itwangtian.com