vue路由許可權和按鈕許可權的實現範例

2022-04-17 10:00:19

一選單路由許可權

1.1前端路由設定表

1.2後端資料返回

1.3 拿到資料後存到vuex

1.4 扁平化的目的是為了跳轉路由時進行對比許可權

//扁平化方法
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中的資料進行渲染 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跳轉攔截判斷

router.beforeEach((to, _from, next) => {
  document.title = "後臺系統-" + to.meta.title // 動態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
        }
      })
    }
  }
})
//獲取是否有當前跳轉的選單許可權
function hasPermission(router, accessMenu) {
  let menu = getMenuByPath(router.path, accessMenu);
  if (menu.path) {
    return true;
  }
  return false;
}

1.7 getMenuBypath方法

這裡我是拿path進行比對的，也可以拿name，只要是路由中唯一的都可以；

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

二按鈕許可權的實現

2.1後端返回的資料還是

vue路由許可權和按鈕許可權的實現範例

目錄

一選單路由許可權

二按鈕許可權的實現

熱門文章

vue路由許可權和按鈕許可權的實現範例

目錄

一 選單路由許可權

二 按鈕許可權的實現

熱門文章

一選單路由許可權

二按鈕許可權的實現