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

// main.jsimport Vue from 'vue'import App from './App'import router from './router'router.beforeEach((to, from, next) =&gt; {  // 在这里编写权限控制和路由拦截的逻辑  next()})Vue.config.productionTip = falsenew Vue({  el: '#app',  router,  components: { App },  template: '<app></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.jsimport 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() // 继续路由切换  }})