Vueの各種権限制御・管理の実装アイデアを詳しく解説

藏色散人

リリース： 2023-04-03 15:09:47

転載

2864 人が閲覧しました

この記事は、vue に関するさまざまな権限制御や管理の実装アイデアを中心に詳しく紹介する、vue に関する知識を提供します。興味のある友人は一緒に見てください。皆様のお役に立てれば幸いです。

#1. メニュー権限

#メニュー権限は、バックエンドシステムの左側のメニューバーを指します。フロントエンドは、要素 UI メニューコンポーネントと組み合わせたバックエンドインターフェイスによって返された権限データに基づいて結合できます。メニューは次のようになります。
vuex永続化プラグイン(ローカルストレージ)でリフレッシュページのメニューバーが表示されない問題を解決
clear()
window.location.reload()現在のページを更新して vuex データをクリアします2 . ルーティング権限

ルーティング権限ユーザーがアドレスバーに悪意を持ってアドレスを入力し、強制的にジャンプさせられるのを防ぐため、動的ルーティングを利用してユーザーの権限を制限することができます。権限がない場合は 404 ページにジャンプします。

initDynamicRoutes

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import Layout from &#39;@/layout&#39;
import store from &#39;@/store&#39;

Vue.use(VueRouter)

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

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

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

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

ログイン後にコピー

3. ボタンの権限

いわゆるボタン権限とは、特定のメニューインターフェイスで、バックエンドによって返されたロールの現在の操作モジュール内の対応するボタン権限データに基づいて、削除や変更などの操作が可能なボタンを表示する必要があることを意味します。その他のボタン。

v-permission
binding.value を通じてカスタム属性値のデータを取得します
vuex|ローカルキャッシュ
el.style.display = "none"
el.parentNode.removeChild(el)
1. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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" } } } }</pre><div class="contentsignin">ログイン後にコピー</div></div>4. データ権限

データ権限

つまり、異なるロールを持つユーザーには異なるテーブルデータが表示されます

Li Si は普通の従業員であり、自分のデータを次の形式でのみ表示できます

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

ログイン後にコピー