快捷導(dǎo)航

vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例

更新時(shí)間：2022年04月17日 08:28:38 作者：周金魚(yú)啊

本文主要介紹了vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一菜單路由權(quán)限

1.1前端路由配置表

1.2后端數(shù)據(jù)返回

1.3 拿到數(shù)據(jù)后存到vuex

1.4 扁平化的目的是為了跳轉(zhuǎn)路由時(shí)進(jìn)行對(duì)比權(quán)限

//扁平化方法
flatten(data) {
 return data.reduce((arr,{name,id,resourceType,dimensionTypeCode,btnPermissions,path,children = [],}) =>
   arr.concat([{name,id,resourceType,dimensionTypeCode,btnPermissions,path,},],
     this.flatten(children)
    ),[]);
},

1.5 el-menu中直接拿到vuex中的數(shù)據(jù)進(jìn)行渲染 sidebar-item組件的代碼就不貼了

<el-menu
  :default-active="activeMenu"
  :collapse="isCollapse"
  :unique-opened="false"
  :collapse-transition="false"
  mode="vertical"
>
 <sidebar-item
    v-for="(route,index) in productMenuList"
    :key="index"
    :item="route"
    :base-path="route.path"
  />
</el-menu>
 
//js部分
computed: {
  productMenuList() {
    if(this.$store.state.user.user.userMenu){
      return this.$store.state.user.user.userMenu;
    }     
  },
},

1.6 router跳轉(zhuǎn)攔截判斷

router.beforeEach((to, _from, next) => {
  document.title = "后臺(tái)系統(tǒng)-" + to.meta.title // 動(dòng)態(tài)title
  if (whiteList.includes(to.path)) {
    next();
  } else {
    if (storageLocal.getItem("token")) {
      if (hasPermission(to, store.state.user.user.menuTile)) {
        next();
      }
      else {
        next('/error/404')
      }
    }
    else {
      next({
        path: "/login",
        query: {
          redirect: to.fullPath
        }
      })
    }
  }
})
//獲取是否有當(dāng)前跳轉(zhuǎn)的菜單權(quán)限
function hasPermission(router, accessMenu) {
  let menu = getMenuByPath(router.path, accessMenu);
  if (menu.path) {
    return true;
  }
  return false;
}

1.7 getMenuBypath方法

這里我是拿path進(jìn)行比對(duì)的，也可以拿name，只要是路由中唯一的都可以；

export const getMenuByPath = function (path, accessMenu) {
    if (accessMenu) {
        let filter = accessMenu.filter(res => {
            return res.path == path;
        })
        return filter.length > 0 ? filter[0] : {}
    }
 
}

二按鈕權(quán)限的實(shí)現(xiàn)

2.1后端返回的數(shù)據(jù)還是??那份

2.2 封裝自定義指令，新建hasPermissionbtn.js

import router from '../../router'
import store from '../../store'
 
export default (Vue) => {
  /**自定義按鈕權(quán)限指令 */
  Vue.directive('has', {
    mounted(el, binding) {
      //從配置獲取用戶按鈕權(quán)限
      let path = router.currentRoute.value.path;
      let menu = getMenuByPath(path, store.state.user.user.menuTile);
      //獲取按鈕權(quán)限
      if (!Vue.config.globalProperties.$_has(binding.value, menu.btnPermissions)){
        //移除不匹配的元素
         el.parentNode.removeChild(el)
         // el.setAttribute("disabled",true)
       }
  },
})
 
//檢查權(quán)限方法
Vue.config.globalProperties.$_has = function (value, btnPermissions) {
  let isExist = false
  //有權(quán)限的按鈕集合；
   let btnPermsArr = []
    if (btnPermissions) {
      btnPermsArr = btnPermissions;
    }
    if (btnPermsArr.includes(value)) {
      isExist = true
    }
    return isExist
  }
}

2.3 權(quán)限按鈕中的使用

//v-has可以使用在任何元素上，如div或者el-table-column標(biāo)簽
<el-button type="text" v-has="'env:account'">關(guān)聯(lián)</el-button>

到此這篇關(guān)于vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue路由權(quán)限和按鈕權(quán)限內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: