使用uniapp开发微信小程序-路由拦截

项目背景：所有页面都需要登录后才可以访问。

1、在项目中新建interceptors文件夹，新建文件route.ts

// route.ts
import { useUserStore } from '@/store'
// 登录页面的路由，例如：/pages/login/Index
const loginRoute = import.meta.env.VITE_SIGN_PATH

// 登录拦截器
const navigateToInterceptor = {
  // 这里的url是 '/' 开头的，如 '/pages/home/Index?name=Tom'
  invoke({ url }: { url: string }) {
  	const userStore = useUserStore()
    const hasLogin = userStore.token
    // 判断是否登录
    if (hasLogin || url.startsWith(loginRoute)) {
      return true
    }
    const redirect = `${loginRoute}?redirect=${encodeURIComponent(url)}`
    uni.navigateTo({ url: redirect })
    return false
  },
}

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

当然，也可以配合使用进行黑名单或者白名单的拦截处理。如果路由的处理逻辑比较复杂，建议配套使用@uni-helper/vite-plugin-uni-layouts插件，可以动态获取路由的元数据来进行逻辑处理。

2、在main.ts中使用拦截器

// main.ts
import { createSSRApp } from 'vue'
import App from './App.vue'
import store from './store'
import routeInterceptor from './interceptors'

export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  app.use(routeInterceptor)  
  return {
    app,
  }
}

需要注意的是，小程序首页（也就是pages数组的第一项）是不会进入拦截器的，例如程序的首页也需要判断是否已登录，如果没登录的话自动跳转到登录页面，这种情况需要首页单独处理逻辑。