vue權(quán)限問題

AaronYuan 發(fā)布于2019-08-26 13:30 / 2039人閱讀

摘要：控制權(quán)限問題后臺返回的接口首頁關于測試更多更多一更多二權(quán)限指令功能權(quán)限指令操作權(quán)限遞歸過濾異步路由表，返回符合用戶角色權(quán)限的路由表設置獲取的權(quán)限信息設置功能權(quán)限功能綁定測試功能顯示參考鏈接地址鏈接

vue控制權(quán)限問題 后臺返回的接口

{
  "code": 200,
  "data": [{
      path: "/",
      meta: {
        title: "首頁",
        show: true,
        limits: ["test"],
      },
    },
    {
      path: "/about",
      meta: {
        title: "關于",
        show: false
      },
    },
    {
      path: "/test",
      meta: {
        title: "測試",
        show: true,
      },
    },
    {
      path: "/more",
      meta: {
        title: "更多",
        show: true
      },
      children: [{
          path: "/more/navone",
          meta: {
            title: "更多一",
            show: false
          },
        },
        {
          path: "/more/navtwo",
          meta: {
            title: "更多二",
            show: true
          },
        }
      ]
    }
  ]
}

權(quán)限指令

import Vue from "vue";
import store from "@/store/index"
 
// v-permission: 功能權(quán)限指令
Vue.directive("permission", {
    bind(el, binding, vnode, oldVnode) {
        const { value } = binding
        const limits = store.getters && store.getters.limits
        if (value) {
            const permissionRoles = value
            const hasPermission = limits.some(limit => {
                return permissionRoles==limit
            })
            if (!hasPermission) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            throw new Error(`need limits! Like v-permission=""test""`)
        } 
    }
})

vuex操作權(quán)限

import {syncRouter, asyncRouter,router } from "@/router/index"
/**
 * 遞歸過濾異步路由表，返回符合用戶角色權(quán)限的路由表
 * @param asyncRouterMap
 * @param roles
 */
function filterAsyncRouter(asyncRouter, roles) {
  asyncRouter.map((item)=>{
    roles.forEach((inItem)=>{
      if(item.path==inItem.path){
        if(item.redirect){
          for(let i=0;i
功能綁定
測試功能顯示

參考鏈接：git地址鏈接

云服務器 GPU云服務器 jira權(quán)限問題 asp 權(quán)限問題阿里云服務器權(quán)限問題 Vue_Vue

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108959.html

sSpring Boot多模塊+ Shiro + Vue：前后端分離登陸整合，權(quán)限認證（一）

摘要：前言本文主要使用來實現(xiàn)前后端分離的認證登陸和權(quán)限管理，適合和我一樣剛開始接觸前后端完全分離項目的同學，但是你必須自己搭建過前端項目和后端項目，本文主要是介紹他們之間的互通，如果不知道這么搭建前端項目的同學可以先找別的看一下。前言本文主要使用spring boot + shiro + vue來實現(xiàn)前后端分離的認證登陸和權(quán)限管理，適合和我一樣剛開始接觸前后端完全分離項目的同學，但是你必...

macg0406 2019-08-19 11:38 評論0 收藏0
手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇)

摘要：我們將登錄按鈕上綁上事件，點擊登錄之后向服務端提交賬號和密碼進行驗證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個涉及到權(quán)限的地方就是側(cè)邊欄，不過在前完整項目地址：vue-element-admin 系列文章：手摸手，帶你用vue擼后臺系列一（基礎篇）手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇) 手摸手，帶你用vue擼后臺系列三 (實戰(zhàn)篇) 手摸手，帶你用vu...

不知名網(wǎng)友 2019-08-20 16:45 評論0 收藏0
20180308_vue-router前端權(quán)限控制問題

vue-router前端權(quán)限控制問題前提綱要：1.用戶A和用戶B有不同的權(quán)限。頁面分左側(cè)菜單部分和右側(cè)內(nèi)容部分，右側(cè)內(nèi)容可能有不同路徑的不同內(nèi)容最簡單例子為點擊左側(cè)用戶管理右側(cè)顯示用戶列表點擊某條內(nèi)容詳情右側(cè)顯示某一用戶的詳細內(nèi)容 2.用戶A可以訪問路徑權(quán)限如下： a/list a/detail/:id a/list/:id 用戶B可以訪問路徑權(quán)限如下： ...

阿羅 2019-08-22 15:13 評論0 收藏0
vue權(quán)限管理系統(tǒng)

摘要：權(quán)限系統(tǒng)后臺管理系統(tǒng)一般都會有權(quán)限模塊，用來控制用戶能訪問哪些頁面和哪些數(shù)據(jù)接口。大多數(shù)管理系統(tǒng)的頁面都長這樣。表為角色權(quán)限關聯(lián)表，一個角色擁有哪些權(quán)限是通過這張表查出來的。這樣就是一個賬號角色權(quán)限的關系。 vue權(quán)限系統(tǒng) 后臺管理系統(tǒng)一般都會有權(quán)限模塊，用來控制用戶能訪問哪些頁面和哪些數(shù)據(jù)接口。大多數(shù)管理系統(tǒng)的頁面都長這樣。 showImg(https://segmentfault...

bovenson 2019-08-23 14:46 評論0 收藏0
vue vuex vue-rouert后臺項目——權(quán)限路由（超詳細簡單版）

摘要：可以配合相關的官方文檔學習。上面的內(nèi)容說的重點，其實也算是項目的全部啦項目地址感覺還不錯的話就請給個吧謝謝有什么問題歡迎提問項目地址：vue-simple-template共三個角色：adan barbara carrie 密碼全是：123456 adan 擁有最高權(quán)限A 他可以看到 red , yellow 和 blue 頁面（共三個頁面）barbara 擁有權(quán)限B 他可以看到...

olle 2019-08-21 18:29 評論0 收藏0