React-Router-Dom实现路由守卫

React Router实现路由守卫

安装react-router-dom

yarn add react-router-dom@5.3.0

在routers目录下

FrontendAuth.js文件

// 总结一下，实现路由守卫需要考虑到以下的问题：
// 未登录情况下，访问不需要权限校验的合法页面：允许访问
// 登陆情况下，访问登陆页面：禁止访问，跳转至主页
// 登陆情况下，访问除登陆页以外的合法页面：允许访问
// 登陆情况下，访问所有的非法页面：禁止访问，跳转至 404
// 未登录情况下，访问需要权限校验的页面：禁止访问，跳转至登陆页
// 未登录情况下，访问所有的非法页面：禁止访问，跳转至 404
//https://blog.youkuaiyun.com/lllomh/article/details/106768929

import { Component } from "react";
import { Route, Redirect } from "react-router-dom";

const ROOT_PAGE   = "/";
const LOGIN_PAGE  = "/login";
const ERROR_PAGE  = "/error";
const LOGIN_INDEX = "username";

class FrontendAuth extends Component {

    render() {
        const pathname = this.props.location.pathname;
        const isLogin = sessionStorage.getItem(LOGIN_INDEX);

        // 在非登陆状态下，访问不需要权限校验的路由
        const targetRouterConfig = this.props.routerConfig.find(item => item.path === pathname);
        if (targetRouterConfig && !targetRouterConfig.auth && !isLogin) {
            return <Route exact path={pathname} component={targetRouterConfig.component} />;
        }

        if (isLogin) {
            // 如果是登陆状态，想要跳转到登陆，重定向到主页
            if (pathname === LOGIN_PAGE) {
                return <Redirect to={ROOT_PAGE} />;
            } 

            // 如果路由合法，就跳转到相应的路由
            if (targetRouterConfig) {
                return <Route path={pathname} component={targetRouterConfig.component} />;
            } 

            // 如果路由不合法，重定向到 404 页面
            return <Redirect to={ERROR_PAGE} />;
        }

        if (!isLogin) {
            // 非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
            if (targetRouterConfig && targetRouterConfig.auth) {
                return <Redirect to={LOGIN_PAGE} />;
            } 
            // 非登陆状态下，路由不合法时，重定向至 404
            return <Redirect to={ERROR_PAGE} />;
        }

    }
}
export default FrontendAuth;

routerMap.ts

//auth设置为 true，表示该路由需要权限校验
//有新的页面都在这里配置

import Login from "../pages/Login";
import Home from "../pages/Home";
import Error from "../pages/Error";

export default [
  {path: "/",       name: "App",    component: Home,  auth: true},
  {path: "/home",   name: "Home",   component: Home,   auth: true},
  {path: "/login",  name: "Login",  component: Login,  auth: false},
  {path: "/error",  name: "Error",  component: Error,  auth: false},
]

在App.tsx文件中

//App.js
import { Component } from "react";
import { BrowserRouter as Router, Redirect, Switch } from "react-router-dom";
import FrontendAuth from "./routers/FrontendAuth";
import routerMap from "./routers/routerMap";
class App extends Component {

  render() {
    return (
      <Router>
        <div>
          <Switch>
            <FrontendAuth routerConfig={routerMap} />
          </Switch>
        </div>

      </Router>
    );
  }
}

export default App;