yudao

6.5 KiB

Raw Blame History Unescape Escape

权限控制

前端权限控制

在商城运营时，我们可能是多个人员共同操作我们的系统，但是每个操作人员所具备的权限应该不同，权限的不同主要表现在两个部分，即导航菜单的查看权限和页面增删改操作按钮的操作权限。我们的把页面导航菜单查看权限和页面操作按钮统一存储在菜单数据库表中，菜单类型页面资源的类型。类型包括目录、菜单、按钮。

权限标识

权限标识用来进行权限控制的唯一标识，主要是进行增删改查的权限控制。

权限标识包括：新增编辑删除查看等，格式结构类似xxx:xxx:xxx 如:admin:user:update。

导航菜单权限流程

用户登录之后，跳转至首页，前端发送请求到后台获取该用户下的所有菜单权限与认证权限数据，认证权限为约束用户增删改查操作，在路由导航守卫路由时加载用户导航菜单并存储到本地存储中。导航栏从本地存储读取菜单列表并进行渲染。

页面按钮权限实现

用户登录系统之后，跳转到首页，在路由导航守卫路由时加载用户权限标识集合。返回结果是用户权限标识的集合，页面操作按钮提供权限标识，查询该权限标识是否在用户权限标识集合中，如有存在，则将按钮为可见状态，如不存在，则将按钮为不可见状态，根据需求，也可以设置成禁用状态。

加载导航菜单权限与页面按钮权限数据

动态路由与导航栏

在router/index.js中，从后台加载导航菜单、页面按钮权限数据，并将数据保存到本地存储中，如下所示:

router.beforeEach((to, from, next) => {
  // 添加动态(菜单)路由
  if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to, globalRoutes) === 'global') {
    next()
  } else {
    http({
      url: http.adornUrl('/sys/menu/nav'),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      sessionStorage.setItem('authorities', JSON.stringify(data.authorities || '[]'))
      fnAddDynamicMenuRoutes(data.menuList)
      router.options.isAddDynamicMenuRoutes = true
      sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
      next({ ...to, replace: true })
    }).catch((e) => {
      console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
      router.push({ name: 'login' })
    })
  }
})

通过fnAddDynamicMenuRoutes()方法，动态加载菜单到路由中保存到本地存储sessionStorage中。但是现在只有路由，还需要将导航栏展示出来。在main-sidebar.vue中，我们将本地存储中菜单数据取出来，然后对导航栏动态渲染出来，并通过menuId与动态(菜单)路由进行匹配跳转至指定路由，这样，当我们点击菜单的时候，就会跳转至特定的路由。

 created () {
 	this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
 	this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
 	this.routeHandle(this.$route)
 }
<sub-menu v-for="menu in menuList"
                  :key="menu.menuId"
                  :menu="menu"
                  :dynamicMenuRoutes="dynamicMenuRoutes">
</sub-menu>

sub-menu组件的部分代码

<template>
  <el-submenu 
    v-if="menu.list && menu.list.length >= 1"
    :index="menu.menuId + ''"
    :popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
    <template slot="title">
      <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
      <span>{{ menu.name }}</span>
    </template>
    <sub-menu
      v-for="item in menu.list" 
      :key="item.menuId"
      :menu="item"
      :dynamicMenuRoutes="dynamicMenuRoutes">
    </sub-menu>
  </el-submenu>
  <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
    <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

按钮权限

在组件中根据外部方法传入的权限标识进行权限判断，如果权限存在，则显示为可见状态，否则不可见。

 <el-button type="primary"
    icon="el-icon-plus"
    size="small"
    v-if="isAuth('admin:indexImg:save')"
    @click.stop="addOrUpdateHandle()">新增</el-button>

通过isAuth(“权限标识”)，判断按钮是否有相同的标识，如果有则可见，否则不可见

/**
 * 是否有权限
 * @param {*} key
 */
export function isAuth (key) {
  let authorities = JSON.parse(sessionStorage.getItem('authorities') || '[]')
  if (authorities.length) {
    for (const i in authorities) {
      const element = authorities[i]
      if (element.authority === key) {
        return true
      }
    }
  }
  return false
}