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

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

#1. メニュー権限

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

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

ルーティング権限のメソッドは
• initDynamicRoutes
にある必要があります。このメソッドは 2 回呼び出されます。つまり、ログイン時です。それ以外の場合は、動的ルートがデフォルト値であり、リフレッシュしてアクセスすることはできません
• #

  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

  3. ボタンの権限

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

#ボタンの権限制御を実装したい場合は、vue のカスタム命令を使用してそれを実現する必要があります。まず、ボタンの権限制御命令を作成する必要があり、この命令を定義します。名前は次のとおりです:
• v-permission
• このコマンド内の現在のユーザーのボタン権限を取得します (vuex|ローカル キャッシュ) データ
• binding.value を通じてカスタム属性値のデータを取得します
• vuex|ローカル キャッシュ
から取得したボタン権限データに、カスタム命令に含まれる権限が含まれているかどうかを確認します
• 含まれていない場合、
  el.style.display = "none"
を設定するか、
• el.parentNode.removeChild(el)
  を使用して現在のボタン要素を削除します
  5. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;el-button v-permission=&quot;[$route.path, &amp;#39;add&amp;#39;]&quot;&gt;添加&lt;/el-button&gt; directives: { // 检测全选的指令 permission: { // 绑定此指令的标签插入到dom节点触发 inserted(el, bind) { // el:绑定该指令标签 // bind:对象格式 当前绑定指令标签上的数据情况 // 获取按钮上的value值，就是用户当前要使用的权限和请求的路由地址 let value = bind.value//[&amp;#39;/user&amp;#39;,&amp;#39;add&amp;#39;] //模拟后端返回的当前角色对应的权限 let rules = { &amp;#39;/menu&amp;#39;: [&amp;#39;add&amp;#39;, &amp;#39;edit&amp;#39;], &quot;/user&quot;: [ &amp;#39;edit&amp;#39;, &amp;#39;remove&amp;#39;], &quot;/goods&quot;: [&amp;#39;add&amp;#39;] } // 根据访问的路由地址获取该模块的操作权限 let allow = rules[value[0]] // 检测当前操作是否合法 if (!allow.includes(value[1])) { // 不合法隐藏操作按钮 el.style = &quot;display:none&quot; } } } }</pre><div class="contentsignin">ログイン後にコピー</div></div>4. データ権限

データ権限

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

たとえば、次の場合Zhang San はプロジェクト マネージャーであり、特定のビジネス フォームのすべてのデータとフィールド情報を表示できます。
• Li Si は普通の従業員であり、自分のデータを次の形式でのみ表示できます
コード実装: フロントエンドはリクエスト ヘッダーを均一にカプセル化し、ユーザー情報を伝え、最後にバックエンドがユーザーの権限を検出し、解析して対応するデータを返します。

import axios from 'axios'
import router from '@/router'

const request = axios.create()

// 映射
const actionMapping = {
  get: 'view',
  post: 'add',
  put: 'edit',
  delete: 'delete'
}

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

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


export default request

• 推奨される学習: "
vueビデオチュートリアル
• >>

以上がVueの各種権限制御・管理の実装アイデアを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。