taro 3.x 微信小程序如何做路由拦截？

[J1angyue]

RT，虽然支持了 vue-router，但是没法导航到tab页面，只能拦截 createRouter 时配置的 routes 页面，而且需要自己写 routerview，需要自己处理返回逻辑，可以说 history 是毫无用处。

能否像 uniapp 一样，增加方法调用拦截：
https://uniapp.dcloud.net.cn/api/interceptor.html#addinterceptor

这样既实现了路由拦截，也没有违反小程序规则

import useUserStore from '@/store/user'
import useSysStore from '@/store/system'
import hasPermi from '@/utils/hasPermi'
import pagesJSON from '@/pages.json'

const routeAPIs = [
'navigateTo', 'redirectTo', 'reLaunch', 'navigateBack'
]

const LOGIN_PAGE_URL = '/pages/login/index'
const WHITE_LIST = [
LOGIN_PAGE_URL,
'/pages/index/index',
]

let userStore = null

async function checkLoginGuard(e) {
if (WHITE_LIST.includes(e.url)) {
return
}

const token = userStore.getToken()
if (!token) {
userStore.clearUserInfo()
e.url = LOGIN_PAGE_URL
return
}

if (!userStore.id) {
try {
await userStore.getUserInfo()
} catch {
userStore.clearUserInfo()
e.url = LOGIN_PAGE_URL
return
}
}
}

function checkHasPermissionGuard(e) {
if (WHITE_LIST.includes(e.url)) {
return
}
const url = e.url.split('?')[0]
const page = pagesJSON.pages.find(p => '/' + p.path === url)
if (!page || !page.permission) {
return
}
if (!hasPermi(page.permission)) {
Reflect.deleteProperty(e, 'url')
uni.showToast({ title: '权限不足', icon: 'none' })
}
}

routeAPIs.forEach(
apiKey => uni.addInterceptor(apiKey, {
async invoke(e) {
userStore = userStore || useUserStore()
// 有时会将绝对路径变成相对路径，比如说有时是 '/pages/a/b'，有时是 'pages/a/b'
// 导致: 1. 守卫匹配不上 url; 2. 相对路径拼接当前路径后提示路径不存在的错误
// 以后所有路由 url 跳转都要设置为绝对路径
if (!e.url.startsWith('/')) {
e.url = '/' + e.url
}
await checkLoginGuard(e)
await checkHasPermissionGuard(e)
return e
}
})
)

[UphkcRNqmafQWcSSSSSS]

不能做个格式化?

import useUserStore from '@/store/user'
  import hasPermi from '@/utils/hasPermi'
  import pagesJSON from '@/pages.json'

  const routeAPIs = [
    'navigateTo', 'redirectTo', 'reLaunch', 'navigateBack',
  ]

  const LOGIN_PAGE_URL = '/pages/login/index'
  const WHITE_LIST = [
    LOGIN_PAGE_URL,
    '/pages/index/index',
  ]

  let userStore = null

  async function checkLoginGuard(e) {
    if (WHITE_LIST.includes(e.url))
      return

    const token = userStore.getToken()
    if (!token) {
      userStore.clearUserInfo()
      e.url = LOGIN_PAGE_URL
      return
    }

    if (!userStore.id) {
      try {
        await userStore.getUserInfo()
      }
      catch {
        userStore.clearUserInfo()
        e.url = LOGIN_PAGE_URL
      }
    }
  }

  function checkHasPermissionGuard(e) {
    if (WHITE_LIST.includes(e.url))
      return

    const url = e.url.split('?')[0]
    const page = pagesJSON.pages.find(p => `/${p.path}` === url)
    if (!page || !page.permission)
      return

    if (!hasPermi(page.permission)) {
      Reflect.deleteProperty(e, 'url')
      uni.showToast({title: '权限不足', icon: 'none'})
    }
  }

  routeAPIs.forEach(
    apiKey => uni.addInterceptor(apiKey, {
      async invoke(e) {
        userStore = userStore || useUserStore()
        // 有时会将绝对路径变成相对路径，比如说有时是 '/pages/a/b'，有时是 'pages/a/b'
        // 导致: 1. 守卫匹配不上 url; 2. 相对路径拼接当前路径后提示路径不存在的错误
        // 以后所有路由 url 跳转都要设置为绝对路径
        if (!e.url.startsWith('/'))
          e.url = `/${e.url}`

        await checkLoginGuard(e)
        await checkHasPermissionGuard(e)
        return e
      },
    }),
  )

[front-refined]

这个也不算真正的“路由拦截”吧，如果要实现以上重写一下 api 就可以了

const origin = Taro.navigateTo;
// @ts-ignore
Taro.navigateTo = (...args: any[]) => {
  // 拦截处理
  // @ts-ignore
  origin(...args);
};