suchen

Heim >Web-Frontend >View.js >Detaillierte Erläuterung der Implementierungsideen der verschiedenen Berechtigungskontrolle und -verwaltung von Vue

Detaillierte Erläuterung der Implementierungsideen der verschiedenen Berechtigungskontrolle und -verwaltung von Vue

藏色散人
藏色散人nach vorne
2023-04-03 15:09:472891Durchsuche

Dieser Artikel vermittelt Ihnen relevantes Wissen über Vue und stellt hauptsächlich die Implementierungsideen verschiedener Berechtigungskontrollen und -verwaltungen von Vue vor. Ich hoffe, dass es für alle hilfreich ist.

Detaillierte Erläuterung der Implementierungsideen der verschiedenen Berechtigungskontrolle und -verwaltung von Vue

1. Menüberechtigungen

  • Menüberechtigungen: Steuern Sie, welche Menüelemente Benutzer im System sehen können.
  • Menüberechtigungen beziehen sich auf die linke Menüleiste im Hintergrundsystem. Das Frontend kann auf dem basieren Back-End-Schnittstelle Die zurückgegebenen Berechtigungsdaten können in einer Schleife mit der Element-UI-Menükomponente zusammengefügt werden. Das Menü wird entsprechend den Berechtigungen angezeigt.
  • Verwenden Sie zum Lösen das Vuex+Persistenz-Plugin Das Problem, dass die Menüleiste beim Aktualisieren der Seite nicht angezeigt wird.
  • Wenn Sie die Abmeldefunktion implementieren, löschen Sie lokale Daten über die Methode clear() und aktualisieren Sie die aktuelle Seite über window.location. reload() nach dem Sprung zum Löschen von Vuex-Datenclear()方法清除本地数据,跳转后通过window.location.reload()刷新当前页面,可实现清除vuex数据的操作

二、 路由权限

  • 路由权限为了防止用户恶意通过在地址栏输入地址发生强行跳转，可以通过动态路由对用户权限做出相关限制,有权限则跳转,无权限则跳转404页面
  • 路由权限的方法需要在两个时机调用initDynamicRoutes,分别是登录成功时和页面创建时,否则动态路由为默认值,刷新无法访问
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout'
import store from '@/store'

Vue.use(VueRouter)

// 动态路由规则
const tableRule = {
  path: '/table',
  name: 'table',
  component: () => import('@/views/table/index.vue')
}
const imageRule = {
  path: '/image',
  name: 'image',
  component: () => import('@/views/image')
}
const userRule = {
  path: '/users',
  name: 'users',
  component: () => import('@/views/users')
}

// 路由规则和字符串的映射关系
const ruleMapping = {
  table: tableRule,
  users: userRule,
  image: imageRule
}

//静态路由
const routes = [
  {
    path: '/login',
    // name: 'login', // 这里如果有name 控制台会提示
    component: () => import('@/views/login')
  },
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        // name: 'home',
        component: () => import('@/views/home')
      },
      {
        path: '/chart',
        component: () => import('@/views/chart')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})



//路由权限：用户登录后接口返回，存储到本地缓存
const rightList = [
  {
    id: 1,
    authName: "基本页面",
    icon: "el-icon-connection",
    children: [
      {
        id: 11,
        authName: "表格页面",
        icon: "el-icon-s-grid",
        path: "table",
        rights: ["view", "edit", "add", "delete"]
      },
      {
        id: 12,
        authName: "素材页面",
        icon: "el-icon-s-marketing",
        path: "image",
        rights: ["view", "edit", "add", "delete"]
      }
    ]
  },
  {
    id: 2,
    authName: "用户权限",
    icon: "el-icon-set-up",
    children: [
      {
        id: 21,
        authName: "权限页面",
        icon: "el-icon-s-custom",
        path: "users",
        rights: ["view", "edit", "add", "delete"]
      }
    ]
  }
];

//在登录(login.vue)、页面刷新（App.vue）的时候，调用initDynamicRoutes
export function initDynamicRoutes () {
  // 根据二级权限 对路由规则进行动态的添加
  const currentRoutes = router.options.routes
  rightList.forEach(item => { // 如果是没有子路由的话 就直接添加进去 如果有子路由的话就进入二级权限遍历
    if (item.path) {
      const temp = ruleMapping[item.path]
      // 路由规则中添加元数据meta
      temp.meta = item.rights
      currentRoutes[1].children.push(temp)
    }

    item.children.forEach(item => {
      // item 二级权限
      const temp = ruleMapping[item.path]
      // 路由规则中添加元数据meta，用于按钮权限控制
      temp.meta = item.rights
      currentRoutes[1].children.push(temp)
    })
  })
  // 添加路由规则
  router.addRoutes(currentRoutes)
}

export default router

三、 按钮权限

  • 所谓的按钮权限是指在某个菜单的界面中，我们需要根据后端返回的该角色当前操作模块中对应的按钮权限数据，展示出可进行操作的按钮，比如删除，修改，增加等按钮.
    1. 如果要实现按钮的权限控制,我们需要使用vue的自定义指令去实现: 首先需要创建一个按钮权限控制的指令,我们定义这个指令的名称为: v-permission
    1. 在这个指令的内部获取到当前用户的按钮权限（vuex|本地缓存中）数据
    1. 在通过binding.value获取到自定义制定属性值的数据
    1. 判断从vuex|本地缓存中获取到的按钮权限数据是否包含了自定义指令包含的权限
    1. 如果不包含,我们在设置el.style.display = “none”,或者使用el.parentNode.removeChild(el)删除当前 按钮元素
<el-button v-permission="[$route.path, &#39;add&#39;]">添加</el-button>
directives: {
        // 检测全选的指令
        permission: {
            // 绑定此指令的标签插入到dom节点触发
            inserted(el, bind) {
                // el:绑定该指令标签
                // bind:对象格式 当前绑定指令标签上的数据情况
                // 获取按钮上的value值，就是用户当前要使用的权限和请求的路由地址
                let value = bind.value//[&#39;/user&#39;,&#39;add&#39;]
                //模拟后端返回的当前角色对应的权限
                let rules = {
                    &#39;/menu&#39;: [&#39;add&#39;, &#39;edit&#39;],
                    "/user": [ &#39;edit&#39;, &#39;remove&#39;],
                    "/goods": [&#39;add&#39;]
                }
                // 根据访问的路由地址获取该模块的操作权限
                let allow = rules[value[0]]
                // 检测当前操作是否合法
                if (!allow.includes(value[1])) {
                    // 不合法隐藏操作按钮
                    el.style = "display:none"
                }
            }
        }
 }

四 、 数据权限

  • 数据权限

    • 2. Routing-Berechtigungen

  • Routing-Berechtigungen Um zu verhindern, dass Benutzer Sprünge durch die Eingabe von Adressen böswillig erzwingen In der Adressleiste kann dynamisches Routing verwendet werden, um Benutzerberechtigungen einzuschränken. Wenn keine Berechtigungen vorhanden sind, wird zur 404-Seite gesprungen.
  • Die Routing-Berechtigungsmethode muss initDynamicRoutesaufrufen > zu zwei Zeitpunkten, nämlich bei erfolgreicher Anmeldung und beim Erstellen der Seite. Andernfalls ist die dynamische Route der Standardwert und kann durch Aktualisieren nicht aufgerufen werden 3. Schaltflächenberechtigungen

Die sogenannten Schaltflächenberechtigungen bedeuten, dass wir in der Benutzeroberfläche eines bestimmten Menüs dem aktuellen Betriebsmodul der vom Backend zurückgegebenen Rolle entsprechen müssen. Die Schaltflächenberechtigungsdaten zeigen die Schaltflächen, die bedient werden können B. Löschen, Ändern, Hinzufügen usw.


    Wenn Sie die Schaltflächenberechtigungssteuerung implementieren möchten, müssen wir die benutzerdefinierten Anweisungen von Vue verwenden, um dies zu erreichen: Zuerst müssen wir einen Befehl für die Schaltflächenberechtigungssteuerung erstellen. Wir definieren den Namen dieses Befehls als: v-permission
🎜
    🎜Den aktuellen Benutzer innerhalb dieses Befehls abrufen. Schaltflächenberechtigungen (vuex | lokaler Cache) Daten 🎜
🎜🎜
    🎜Erhalten Sie benutzerdefinierte Attributwertdaten über binding.value🎜🎜🎜
      🎜Bestimmen ob die von vuex|local Cache erhaltenen Schaltflächenberechtigungsdaten die in der benutzerdefinierten Anweisung enthaltenen Berechtigungen enthalten🎜
    🎜🎜
      🎜Wenn sie nicht enthalten sind, sind wir es Setzen Sie el.style.display = „none“ oder verwenden Sie el.parentNode.removeChild(el). Löschen Sie das aktuelle Schaltflächenelement🎜
    🎜🎜
    import axios from &#39;axios&#39;
import router from &#39;@/router&#39;

const request = axios.create()

// 映射
const actionMapping = {
  get: &#39;view&#39;,
  post: &#39;add&#39;,
  put: &#39;edit&#39;,
  delete: &#39;delete&#39;
}

// request.defaults.baseURL = &#39;http://127.0.0.1:7001&#39; // 注释掉之后调的接口将是Mock数据

// 请求拦截器
request.interceptors.request.use(req => {
  // console.log(req.url)
  // console.log(req.method)
  if (req.url !== &#39;/login&#39; && req.url !== &#39;/roles&#39;) {
    // 不是登录的请求 也不是获取权限的请求 则在请求头中加入token  不知道如何使用Mock来验证请求头中的token 故此处注释
    // req.headers.Authorization = sessionStorage.getItem(&#39;token&#39;)
    const action = actionMapping[req.method]
    // 判断非权限范围内的请求
    // console.log(router)
    const currentRight = router.currentRoute.meta
    // console.log(currentRight)
    if (currentRight && currentRight.indexOf(action) === -1) {
      // 没有权限
      alert(&#39;没有权限&#39;)
      return Promise.reject(new Error(&#39;没有权限&#39;))
    }
  }
  return req
})


export default request

    4. Datenberechtigungen🎜🎜🎜Datenberechtigungen sind die Tabellendaten, die von Benutzern mit unterschiedlichen Rollen gesehen werden. Das ist anders🎜🎜Zum Beispiel, wenn Zhang San ein Projektmanager ist Er kann alle Daten und Feldinformationen in einem bestimmten Geschäftsformular sehen und tragen Sie Benutzerinformationen. Schließlich erkennt das Backend die Benutzerberechtigungen und analysiert, um die entsprechenden Daten zurückzugeben

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierungsideen der verschiedenen Berechtigungskontrolle und -verwaltung von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

封装 循环 接口 location display ui
Stellungnahme：
Dieser Artikel ist reproduziert unter:juejin.im. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Ausführliche Erklärung, wie man mit Vue eine benutzerdefinierte Kalenderkomponente kapseltNächster Artikel：Ausführliche Erklärung, wie man mit Vue eine benutzerdefinierte Kalenderkomponente kapselt

In Verbindung stehende Artikel

Mehr sehen