Vue项目 权限控制方案 --使用路由守卫与自定义指令

今日徒弟问我,怎么处理后台管理这块的拦截

比如,用户没有一个路由的权限,但用户直接从其他地方得到的链接,直接输入到浏览器,这种应该怎么做拦截

另外,权限如果控制到按钮上,改如何做权限,有没有简单,轻便的方法.

于是我整理了一些目前我们系统的权限管理方案,给她做了一个demo展示.

全局前置导航守卫js

      // 使用路由守卫对router全局权限拦截,
      import router from './src/router'
      import NProgress from 'nprogress'
      import 'nprogress/nprogress.css'
      NProgress.configure({ showSpinner: false })
      const whiteList = ['/login', '/withoutPermission', '/'] // 不进行权限判断的白名单
      router.beforeEach((to, from, next) => {
        NProgress.start()
       if (whiteList.includes(to.path)) {
         next()
        } else {
         // 获取localStorage中的权限链接数组
         const localStoragePermissionLinkArr = JSON.parse(localStorage.getItem('permissionLink') || '[]')
         if (localStoragePermissionLinkArr && localStoragePermissionLinkArr.length > 0 ) {
           if (localStoragePermissionLinkArr.includes(to.path)) {
             console.log('有此页面权限直接进入')
             next()
            } else {
             console.log('没有此权限进入无权限页面')
             next({ path: '/withoutPermission' })
              NProgress.done()
            }
          } else {
           console.log('localStorage中没有权限数组permissionLink')
           next({ path: '/login' })
            NProgress.done()
          }
        }
      })
      router.afterEach(() => {
        NProgress.done()
      })
  
 

自定义权限拦截指令

      // 验证权限自定义指令 在对象插入父级元素时验证
      // bind:指令的表达式对象,权限链接; el绑定指令的element,
      // 例如v-permission="'/start/add'"
      Vue.directive('permission', {
       inserted: function (el, bind) {
         let permissionUrl = bind.value
         let permissionArr = JSON.parse(localStorage.getItem('permissionLink') || '[]')
         if (!permissionArr.includes(permissionUrl)) {
            el.parentNode.removeChild(el)
          }
        }
      })
  
 

使用方法如下:

      <router-link v-permission="'/home'" to="/home">Home | </router-link>
      <router-link v-permission="'/about'" to="/about">About | </router-link>
      <router-link v-permission="'/admin'" to="/admin">Home | </router-link>
      <router-link v-permission="'/withoutPermission'" to="/withoutPermission">withoutPermission | </router-link>
      <router-link v-permission="'/test1'" to="/test1">test1</router-link>
  
 

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/97674939