uniapp如何实现路由守卫、路由拦截，权限引导

因为uniapp路由的实现方式和以往vue开发的router路由时不太一样，故官方这么说：

经过一番网上冲浪发现，有两种方式可以实现，

第一种方式：

在上述代码中，我们通过监听beforeRouterEnter事件来实现路由守卫。在回调函数中，你可以根据实际需求进行相应的验证和逻辑操作。如果需要继续导航到目标页面，调用next()方法；如果需要取消导航，可以选择不调用next()方法。

也就是说在你要跳转页面时候，触发这个事件，然后回调里面（next()）写navigateTo

第二种是通过uni提供的拦截器（文档）实现：

新建interceptor.js

let needLogin = ["/pages/tab/index",
]let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];list.forEach(item => { //用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器console.log(item,'router list item')uni.addInterceptor(item, {invoke(e) { // 调用前拦截//获取用户的tokenconsole.log(e,'routerjs invoke')const token = localStorage.getItem('token')//获取当前页面路径（即url去掉"?"和"?"后的参数）console.log(token,'router index token')const url = e.url.split('?')[0]console.log(url,'router index url')console.log(needLogin.includes(url))//判断要打开的页面是否需要验证登录if (needLogin.includes(url) && token == '') {uni.showToast({title: '该页面需要登录才能访问，请先登录',icon: 'none'})uni.navigateTo({url: "/pages/login/login"})return false}return true},fail(err) { // 失败回调拦截 console.log(err);},})
})

然后在main.js中引入