起因

接触小程序不多，遇到一个常见需求token失效或过期限制页面权限，并提示重新登录。

一种是通过vue-router 路由导航常用思路去实现

一种是通过uni.addInterceptor 拦截器实现

这里着重说第二种

uni.addInterceptor： 需要拦截的api名称，如：uni.addInterceptor('request', OBJECT) ，将拦截 uni.request()

实现思路就是 在main.js入口文件中 通过addInterceptor 添加拦截器拦截navigateTo redirectTo navigateBack switchTab 方法调用，在invoke（拦截前触发）然后判断是否登录，或是否失效等等。然后根据情况更改事件参数的url。

代码实现

import { createSSRApp } from 'vue';
import App from './App.vue';
import uviewPlus from 'uview-plus';
import { setupPinia } from './store';

export function createApp() {
  const app = createSSRApp(App);

  app.use(uviewPlus);
  setupPinia(app);

  function routerCallBack(args) {
    let token = uni.getStorageSync('token');

    // 根据自己需求写判断逻辑
    if (args.url != '/pages/module-login/index' && !token) {
      // 获取当前页面路由 将当前路由地址赋予args 这样他就不会跳转了
      args.url = getCurrentPages()[0].route || args.url;
      // 添加提示确认框
      uni.showModal({
        title: '登录已过期，请重新登录',
        content: '是否前往登录？',
        success: (res) => {
          // 确认前往登录页面
          if (res.confirm) {
            uni.removeStorageSync('token');
            uni.redirectTo({
              url: '/pages/module-login/index',
            });
          }
        },
      });
    }
  }

  // 添加各个路由跳转方法的拦截器
  uni.addInterceptor('navigateTo', {
    invoke: routerCallBack,
  });
  uni.addInterceptor('redirectTo', {
    invoke: routerCallBack,
  });
  uni.addInterceptor('navigateBack', {
    invoke: routerCallBack,
  });
  uni.addInterceptor('switchTab', {
    invoke: routerCallBack,
  });

  return {
    app,
  };
}

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