如何在 React 项目中实现一个路由守卫

路由守卫，顾名思义就是前端路由组件切换或者激活之前执行的一个函数，这样的好处是可以提前获取一些用户信息对路由进行权限控制等操作。在 vue-router 中已经实现了几个路由守卫，我们可以在项目中直接使用，但是 react-router 并没有提供直接可用的 api，那只能自己去简单的写一个了。

先看下 react-router 懒加载的伪代码

function lazy(element) {
    return element();
}

function LazyLoad() {
    return (
        <Suspense fallback={<LazyLoading />}>
          <LazyComponent />
        </Suspense>
    );
}

如果我们希望执行 lazy 函数之前先执行 routeGuard 函数用来取用户信息，然后再加载路由组件，所以我们实现一个 beforeRouteEnter 函数

function routeGuard() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('userInfo');
        }, 2 * 1000);
    });
}

Function.prototype.beforeRouteEnter = function (guard) {
    return async (...args) => {
        try {
            const result = await guard();

            return this(...args);
        } catch (e) {
            console.log(e);
        }
    };
}

然后可以这样调用

lazy.beforeRouteEnter(routeGuard)(LazyLoad);

这样 routeGuard 就会在 lazy 之前执行，也就是可以在 routeGuard 里处理刷新 token 或者鉴权等一系列操作，beforeRouteEnter 就是可以当作一个路由守卫调用。