uniapp实现路由拦截

使用uni官方提供的拦截器 uni.addInterceptor 实现在用户未登录的情况下，拦截其访问需要登录权限的页面，并将其重定向到登录页面。

1. 创建拦截器函数

// src/composables/interceptor.js

// 页面白名单，不受拦截
const whiteList = [
    '/pages/login/login'
]
function hasPermission (url) {
    // 获取本地缓存的登录信息
	let member = uni.getStorageSync('member');
    // 在白名单中或有登录判断条件可以直接跳转
    if(whiteList.includes(url.split('?')[0]) || member) {
		console.log('跳转的页面在白名单内或是已登录')
        return true
    }
	console.log('跳转的页面不在白名单内且未登录')
    return false
}

// 遍历给路由方法添加拦截器
let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
list.forEach(item => {
       // 页面跳转拦截器
       uni.addInterceptor(item, {
        // 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
        invoke (e) {
            if(!hasPermission(e.url)){
                uni.showToast({
                    title: '您还未登录，请先登录',
                    icon: 'none'
                })
                console.log(e.url);
                uni.navigateTo({url: '/pages/login/login'})
                return false
            }
            return true
        },
        fail(err) { // 失败回调拦截 
            console.log(err);
        },
    })

})

2. 在 main 中引入

import { createSSRApp } from 'vue'
import '@/composables/interceptor.js';//引入拦截器
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app,
  }
}

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

#拦截器的适用场景非常多，比如路由拦截，权限引导等。

你可以参考插件市场,拦截器应用示例：图片选择api时无权限，引导用户快捷打开系统设置：https://ext.dcloud.net.cn/plugin?id=5095