导航守卫（禁止访问某些页面）

最新推荐文章于 2024-10-02 05:39:15 发布

怡呀呀

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量119

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/cnfabu/article/details/141323087

版权

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
Vue.use(VueRouter)
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/xx/xxx/xxx.vue')
  },
  {
    path: '/demo1',
    name: 'demo1',
    component: () => import('@/xx/xxx.vue')
  },

  {
    path: '/demo2',
    name: 'demo2',
    children: [{
        path: 'index',
        meta: { flag: 0 },
        component: () => import('@/xx/xxxx.vue')
    }]
   
  }
]

const router = new VueRouter({
  mode: 'hash',
  routes
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const flag = to.meta.flag 
  const userRole = store.getters.userInfo.role
  if (flag === 0 && userRole === 1) {
    Vue.prototype.$message({ message: '您没有权限访问该页面！', type: 'warning' })
    return next(from.path)
  }
  // 否则继续导航
  next()
})

export default router