拦截器

路由拦截器

在 src>lanjieqi下面创建 route.js 文件

代码如下

/**
 * by 菲鸽 on 2024-03-06
 * 路由拦截，通常也是登录拦截
 * 可以设置路由白名单，或者黑名单，看业务需要选哪一个
 * 我这里应为大部分都可以随便进入，所以使用黑名单
 */
import { subPackages, pages } from "../pages.json";
// TODO Check
const loginRoute = "/pages/login/index";

const isLogined = () => {
  return false;
};

const getNeedLoginPages = (key = "needLogin") => {
  console.log(pages);
  // 这里处理主包
  const mainPages = [
    ...pages
      .filter((page) => !key || page[key])
      .map((page) => ({
        ...page,
        path: `/${page.path}`,
      })),
  ];
  console.log(mainPages);
  // 这里处理分包
  const subPages = [];
  subPackages.forEach((subPageObj) => {
    // console.log(subPageObj)
    const { root } = subPageObj;

    subPageObj.pages
      .filter((page) => !key || page[key])
      .forEach((page) => {
        subPages.push({
          ...page,
          path: `/${root}/${page.path}`,
        });
      });
  });
  const result = [...mainPages, ...subPages];
  // console.log(`getAllPages by ${key} result: `, result)
  return result;
};

// 黑名单登录拦截器 - （适用于大部分页面不需要登录，少部分页面需要登录）
const navigateToInterceptor = {
  // 注意，这里的url是 '/' 开头的，如 '/pages/index/index'，跟 'pages.json' 里面的 path 不同
  invoke({ url }) {
    // console.log(url) // /pages/route-interceptor/index?name=feige&age=30
    const path = url.split("?")[0];
    console.log(path);
    let needLoginPages = [];
    // 为了防止开发时出现BUG，这里每次都获取一下。生产环境可以移到函数外，性能更好
    needLoginPages = getNeedLoginPages();
    console.log("8888888888888");
    console.log(needLoginPages);
    let urlresult = needLoginPages.map((page) => page.path);
    const isNeedLogin = urlresult.includes(path);
    console.log(isNeedLogin);
    if (!isNeedLogin) {
      return true;
    }
    const hasLogin = isLogined();
    if (hasLogin) {
      return true;
    }
    const redirectRoute = `${loginRoute}?redirect=${encodeURIComponent(url)}`;
    console.log(redirectRoute);
    uni.navigateTo({ url: redirectRoute });
    return false;
  },
};

export const routeInterceptor = {
  install() {
    uni.addInterceptor("navigateTo", navigateToInterceptor);
    uni.addInterceptor("reLaunch", navigateToInterceptor);
    uni.addInterceptor("redirectTo", navigateToInterceptor);
  },
};

• main.js 里面引入

import { createSSRApp } from "vue";
import App from "./App.vue";
import "virtual:uno.css";
import store from "./store";
import { routeInterceptor } from "./lanjieqi/route";
export function createApp() {
  const app = createSSRApp(App);
  app.use(store);
  app.use(routeInterceptor);
  return {
    app,
  };
}

使用

• 哪个页面需要拦截 就写上 needLogin: true

<route type="page" lang="json">
{
  "style": { "navigationBarTitleText": "侧腰" },
  "layout": "demo",
  "needLogin": true
}
</route>