vue權限問題

AaronYuan 發布于2019-08-26 13:30 / 2024人閱讀

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

vue控制權限問題 后臺返回的接口

{
  "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
          },
        }
      ]
    }
  ]
}

權限指令

import Vue from "vue";
import store from "@/store/index"
 
// v-permission: 功能權限指令
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操作權限

import {syncRouter, asyncRouter,router } from "@/router/index"
/**
 * 遞歸過濾異步路由表，返回符合用戶角色權限的路由表
 * @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權限問題 asp 權限問題阿里云服務器權限問題 Vue_Vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108959.html

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

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

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

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

不知名網友 2019-08-20 16:45 評論0 收藏0
20180308_vue-router前端權限控制問題

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

阿羅 2019-08-22 15:13 評論0 收藏0
vue權限管理系統

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

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

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

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