钉钉小程序开发中实现路由守卫拦截

上一篇文章描述了博主认为靠谱一点的技术选型

文章地址：钉钉小程序开发的技术选型-CSDN博客

本文将深入探讨如何在基于这些技术栈的小程序项目中实施路由守卫拦截。

路由守卫的基本概念

路由守卫主要分为全局前置守卫(beforeEach)、全局解析守卫(beforeResolve)、全局后置钩子(afterEach)、路由独享守卫以及组件内守卫等几种类型。它们分别用于不同的场景下对路由跳转进行控制或处理。其中，全局前置守卫是每次导航都会触发的，非常适合用来做权限验证或者登录状态检查。

本文章只做了简单的Demo，并未真正实现，后续一点点完善哦！

实现路由守卫拦截

在钉钉小程序开发中，如果我们希望使用路由守卫来进行访问控制，首先需要确保我们的项目已经正确集成了Vue Router，并且能够正常工作。接下来，我们可以按照以下步骤来实现路由守卫拦截：

1. 了解uniapp提供的拦截器

文档地址：uniapp拦截器

import { createSSRApp } from "vue";
import App from "./App.vue";
export function createApp() {
  const app = createSSRApp(App);
  uni.addInterceptor('navigateTo', {
    invoke(res) {
      console.log('前置拦截', res)
      res.url = res.url + '?a=1'
      return res
    },
    success(res) {
      console.log('后置拦截', res)
      res.url = res.url + '?a=1'
      return res
    }
  })
  return {
    app,
  };
}

在 src/main.ts 中加入了拦截器，发现虽然可以有效拦截 uni.navigateTo 跳转的事件，但是切换Tabbar的事件以及返回的事件均无法捕获。

官方给的回答是：

注意：拦截uni.switchTab本身没有问题。但是在微信小程序端点击tabbar的底层逻辑并不是触发uni.switchTab。所以误认为拦截无效，此类场景的解决方案是在tabbar页面的页面生命周期onShow中处理。

2. 二次封装

大概的意思是我们平时处理其他跳转就好了，至于首页的tabbar鉴权之类的还是在onShow生命周期中处理，勉强也可以接受；但是跳转的方式也不少哦，让我们做进一层的封装！

在写代码过程中遇到一点小bug，发现使用@click事件无法跳转，小伙伴可以改成@tap试试哦！

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <view style="width: 100%">
      <ant-button @tap="toIndex" type="primary" size="large">前往首页</ant-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const title = ref('About')

const toIndex = () => {
  uni.navigateBack({
    delta: 1
  })
}
</script>

<style>
</style>

整体思路就是监听所有的跳转事件，完成路由守卫，注意这里uni.navigateBack是不监控的哈！

首先我们在src目录下创建一个 permission.ts 文件

const envents = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab']

const useRouterInterceptor = () => {
    envents.forEach(eventName => {
        uni.addInterceptor(eventName, {
            invoke(res) {
                console.log('前置拦截', res)
                return res
            },
            success(res) {
                console.log('后置拦截', res)
                return res
            }
        })
    })
}

export default useRouterInterceptor

然后在src/main.ts中注册

import { createSSRApp } from "vue";
import App from "./App.vue";
import useRouterInterceptor from './permission'

export function createApp() {
  const app = createSSRApp(App);
  useRouterInterceptor()
  return {
    app,
  };
}

代码已发布至 GitCode - 全球开发者的开源社区,开源代码托管平台

分支：permission

这样简单的路由守卫就做好啦！下一章节我们来说如何在tabBar页面做鉴权吧！