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