current position:Home>Vue instruction authority

Vue instruction authority

2022-05-15 02:03:08rojie0

newly build utils/permission.js

import store from '@/store'

/** * @param {Array} value * @returns {Boolean} * @example see @/views/permission/directive.vue */
export default function checkPermission(value) {
    
  if (value && value instanceof Array && value.length > 0) {
    
    const roles = store.getters && store.getters.roles  // Stored permission name 
    const permissionRoles = value

    const hasPermission = roles.some(role => {
    
      return permissionRoles.includes(role)
    })
    return hasPermission
  } else {
    
    console.error(`need roles! Like v-permission="['admin','editor']"`)
    return false
  }
}

Use

<template>
  <!-- Admin can see this -->
  <el-tag v-permission="['admin']">admin</el-tag>

  <!-- Editor can see this -->
  <el-tag v-permission="['editor']">editor</el-tag>

  <!-- Editor can see this -->
  <el-tag v-permission="['admin','editor']">Both admin or editor can see this</el-tag>
</template>

<script>
//  Of course, you can also use it for convenience , Register it with the global 
import permission from '@/directive/permission/index.js' //  Permission judgment instruction 
export default{
    
  directives: {
     permission }
}
</script>

copyright notice
author[rojie0],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120528099051.html

Random recommended