taro移动端项目配置路由拦截器

前言

个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；

演示地址

文档地址

源码github地址

事因

最近在闲暇时间之余，便开始着手于开发我自己个人的开源项目leno-admin的移动端，包含移动端h5页面和微信小程序，也遇到了不少taro的坑，在路由拦截上无法直接套用web端的路由拦截，又因为需要兼容小程序端，索性便自己封装一个路由拦截器，下面便直接上代码！

封装RouterMonitor组件

我们在components中封装一个组件，接收唯一一个传值，就是url当前路径的传值，然后将该组件在入口文件app.tsx中引入，每一次页面的变化，都会触发App组件，从而达到触发我们自己封装的路由拦截器，然后就将拦截逻辑写在组件中即可；

tsx 复制代码

// components/RouterMonitor.tsx 
import Taro from "@tarojs/taro";

// url为app.tsx传入的当前页面的路径
const RouterMonitor = (props: { url: string }) => { 
  const token = Taro.getStorageSync("leno-admin-mob-token");
  const { url } = props;
  // pages是所有页面在的主文件夹下面，所有配置在app.config.ts中的路由路径都是pages开头，
  // 可根据自己项目进行修改；
  const handleUrl = url.split("pages")[1]?.split("?")[0];
  // router-path是上一层路由的页面
  let routerPath = Taro.getStorageSync("router-path");

  if (token) {
    // 有token去login
    if (handleUrl === "/login/index" || handleUrl === "/" || !handleUrl) {
      Taro.switchTab({
        url: routerPath as string,
      });
    } else {
      // 非登录页面才需要存储路由路径
      Taro.setStorage({
        key: "router-path",
        data: "/pages" + handleUrl,
      });
    }
  } else {
    if (handleUrl !== "/login/index" && handleUrl !== "/") {
      Taro.redirectTo({
        url: "/pages/login/index",
      });
    }
  }

  return <></>;
};

export default RouterMonitor;

app.tsx

tsx 复制代码

// app.tsx
import { FC, ReactNode } from "react";
import "taro-ui/dist/style/index.scss";
import "./app.scss";
import "~/assets/icons/iconfont.scss";
import RouterMonitor from "./components/RouterMonitor";
interface AppProps {
  children: ReactNode;
}

const App: FC<AppProps> = ({ children }) => {
  return (
    <div>
      // 调用时传入当前页面路由路径
      <RouterMonitor url={window.location.href} />
      {children}
    </div>
  );
};

export default App;