Penjelasan terperinci tentang idea pelaksanaan pelbagai kawalan dan pengurusan kebenaran Vue

藏色散人

Lepaskan： 2023-04-03 15:09:47

ke hadapan

2889 orang telah melayarinya

Artikel ini membawakan anda pengetahuan yang berkaitan tentang Vue terutamanya memperkenalkan secara terperinci idea-idea pelaksanaan pelbagai kawalan kebenaran dan pengurusan Vue yang berminat boleh melihatnya bersama-sama.

1 Kebenaran menu

Kebenaran menu: mengawal item menu yang boleh dilihat pengguna dalam sistem
Kebenaran menu merujuk kepada bar menu kiri dalam sistem bahagian belakang bahagian hadapan boleh disambungkan bersama berdasarkan data kebenaran yang dikembalikan oleh antara muka bahagian belakang digabungkan dengan komponen menu elemen-ui dipaparkan mengikut kebenaran
Gunakan pemalam vuex+persistence (storan tempatan) untuk menyelesaikan masalah bar menu tidak dipaparkan semasa menyegarkan halaman
Apabila melaksanakan fungsi log keluar, kosongkan data setempat melalui kaedah clear(), dan muat semula halaman semasa melalui window.location.reload() selepas melompat , boleh merealisasikan operasi mengosongkan data vuex

2. Keizinan penghalaan

Penghalaan keizinan Untuk mengelakkan pengguna daripada memaksa lompat secara berniat jahat dengan memasukkan alamat dalam bar alamat, anda boleh menggunakan Penghalaan dinamik mengenakan sekatan yang berkaitan ke atas kebenaran pengguna Jika ada kebenaran, ia akan melompat ke halaman 404.
Kaedah penghalaan kebenaran perlu dipanggil initDynamicRoutes pada dua kali, iaitu apabila log masuk berjaya dan apabila halaman dibuat jika tidak, penghalaan dinamik adalah nilai lalai dan muat semula tidak boleh diakses

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

Salin selepas log masuk

3. Butang kebenaran

Apa yang dipanggil kebenaran butang merujuk kepada antara muka menu tertentu, kita perlu memaparkan butang yang boleh dikendalikan berdasarkan data kebenaran butang yang sepadan dalam modul operasi semasa peranan yang dikembalikan oleh bahagian belakang, seperti padam, ubah suai, tambah, dll.
1. Jika Untuk melaksanakan kebenaran butang kawalan, kita perlu menggunakan arahan tersuai vue untuk mencapainya: Pertama, kita perlu mencipta arahan kawalan kebenaran butang Kami mentakrifkan nama arahan ini sebagai: v-permission
<. 🎜>
1. Dapatkan data nilai atribut tersuai binding.value
1. mengandungi kebenaran yang disertakan dalam arahan tersuaivuex|本地缓存
1. , atau gunakan el.style.display = “none” untuk memadamkan elemen butang semasael.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"
                }
            }
        }
 }

Salin selepas log masuk

Pengguna dengan peranan yang berbeza melihat data jadual yang berbeza 数据权限

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

Salin selepas log masuk

Pembelajaran yang disyorkan: "

tutorial video vue"

Atas ialah kandungan terperinci Penjelasan terperinci tentang idea pelaksanaan pelbagai kawalan dan pengurusan kebenaran Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!