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)
    }
  }
})

使用方法如下:

Home | 
about | 
Home | 
withoutPermission | 
test1

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