如何在uniapp中使用路由导航守卫实现权限控制和路由拦截

// main.js

import Vue from 'vue'
import App from './App'
import router from './router'

router.beforeEach((to, from, next) => {
  // 在这里编写权限控制和路由拦截的逻辑
  next()
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router.beforeEach((to, from, next) => {
  // 获取用户角色或权限
  const userRole = getUserRole()
  
  // 判断是否是管理员页面，并且用户角色不是管理员
  if (to.path === '/admin' && userRole !== 'admin') {
    // 跳转到其他页面，比如登录页面
    next('/login') 
  } else {
    next()
  }
})

router.beforeEach((to, from, next) => {
  // 判断是否是付费页面，并且用户未付费
  if (to.meta.requiresPayment && !hasPaid()) {
    // 跳转到付费页面
    next('/payment') 
  } else {
    next()
  }
})

// router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home'),
      meta: {
        requiresAuth: true, // 需要登录权限
        requiresPayment: true // 需要付费
      }
    },
    {
      path: '/admin',
      component: () => import('@/views/Admin'),
      meta: {
        requiresAuth: true,
        requiresAdmin: true // 需要管理员权限
      }
    }
  ]
})

export default router

router.beforeEach((to, from, next) => {
  // 判断是否需要登录权限，如果需要且用户未登录，则跳转到登录页面
  if (to.meta.requiresAuth && !isUserLoggedIn()) {
    next('/login') 
  } else {
    next() // 继续路由切换
  }
})