react实现路由守卫-蒲公英云

react实现路由守卫

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

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

路由表格式

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;