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>

————————————————