react实现路由守卫

朴灿烈づ我的快乐病毒、 2021-09-10 04:52 747阅读 0赞

与`vue`不同，`vue`直接使用`beforeEach`即可实现全局路由守卫等功能。  
`react`要实现路由守卫得自己配置。  
实现该功能的前提是你需要先掌握`react的高阶组件的使用`

1.  需要配置一张路由表。
2.  需要使用高阶组件。

路由表格式

import Home from '需要展示的页面'
    var routes = [
      {path: "/", name: "home", component: Home, auth: true}
    ]
    // auth 是否需要登录
    export default routes ;

高阶组件的实现

import React, { Component } from "react";
    import { Route, Redirect } from "react-router-dom";
    class FrontendAuth extends Component {
      render() {
        const { routerConfig, location } = this.props;
        const { pathname } = location;
        const isLogin = sessionStorage.getItem("token");
        // console.log(pathname)
        // console.log(routerConfig);
        // 如果该路由不用进行权限校验，登录状态下登陆页除外
        // 因为登陆后，无法跳转到登陆页
        // 这部分代码，是为了在非登陆状态下，访问不需要权限校验的路由
        const targetRouterConfig = routerConfig.find(
          (item) => {
            return item.path.replace(/\s*/g,"") === pathname
          }
        );
        if (targetRouterConfig && !targetRouterConfig.auth && !isLogin) {
          const { component } = targetRouterConfig;
          return <Route exact path={pathname} component={component} />
        }
        if (isLogin) {
          // 如果是登陆状态，想要跳转到登陆，重定向到主页
          if (pathname === "/login") {
            return <Redirect to="/" />;
          } else {
            // 如果路由合法，就跳转到相应的路由
            if (targetRouterConfig) {
              return (<Route path={pathname} component={targetRouterConfig.component} />);
            } else {
              // 如果路由不合法，重定向到 404 页面
              return <Redirect to="/404" />;
            }
          }
        } else {
          // 非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
          if (targetRouterConfig && targetRouterConfig.auth) {
            console.log('跳转登录登录')
            return <Redirect to="/login" />;
          } else {
            // 非登陆状态下，路由不合法时，重定向至 404
            return <Redirect to="/404" />;
          }
        }
      }
    }
    export default FrontendAuth

使用高阶组件

import React from 'react';
    import {Switch, BrowserRouter} from 'react-router-dom'
    // 你的高阶组件
    import FrontendAuth from './FrontendAuth'
    // 你的路由表
    import {routerObj} from '../views/index'
    
    function router() {
      return (
        <BrowserRouter>
          <Switch>
            <FrontendAuth routerConfig={routerObj} />
          </Switch>
        </BrowserRouter>
      );
    }
    
    export default router;

后续会更新如何自动化配置路由表，以及在路由中如何自定义懒加载和预加载页面和组件  
（最近在用react重新开发博客-。-有空在更）