eladmin按钮权限分配超详情很简单

本文详细介绍了在Vue.js项目中使用Element-UI进行权限管理的实现过程,包括用户登录、Vuex状态管理、自定义v-permission指令来控制权限显示。在登录时,用户信息被存储在Vuex的state中,通过比较用户角色和v-permission指令的值来决定按钮等元素的可见性。管理员和普通用户的权限分配通过在v-permission列表中添加相应角色标识来完成。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

在最近的项目中,有对于不同用户分配不同权限的需求,以前写的时候知识跟着用,这次按照 登录-刷新-验证 打算自己去看一遍(使用element-ui)

话不多说,本文我分为两个角色去瞅一眼

管理员

登录

在login.vue页面

handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        console.log(valid)
        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe,
          code: this.loginForm.code,
          uuid: this.loginForm.uuid
        }
        if (user.password !== this.cookiePass) {
          user.password = encrypt(user.password)
        }

        if (valid) {
          this.loading = true
          if (user.rememberMe) {
            Cookies.set('username', user.username, {
              expires: Config.passCookieExpires
            })
            Cookies.set('password', user.password, {
              expires: Config.passCookieExpires
            })
            Cookies.set('rememberMe', user.rememberMe, {
              expires: Config.passCookieExpires
            })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          // 发送,action,验证登录
          this.$store
            .dispatch('Login', user)
            .then(() => {
              this.loading = false
              this.$router.push({ path: this.redirect || '/' })
            })
            .catch(() => {
              this.loading = false
              this.getCode()
            })
        } else {
          console.log('error submit!!')
          // return false
        }
      })
    }

我们可以在登录页面看到,首先验证了用户填写的表单,然后发送 action 去请求登录接口

可以预见,eladmin是要把登录接口返回的信息存在 vuex 中,那么登录接口返回的东西肯定包含了很多用户的个人信息。

vuex模块化

框架划分了处理各个不同业务的js文件
在store/modules/user.js中

// 登录
action: {
	Login({ dispatch, commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo.username, userInfo.password, userInfo.code, userInfo.uuid).then(res => {
          // 在这里调用存储用户信息方法
          setUserInfo(res.data.user, commit)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
}
export const setUserInfo = (res, commit) => {
  // 如果没有任何权限,则赋予一个默认的权限,避免请求死循环
  if (res.roles.length === 0) {
    commit('SET_ROLES', ['ROLE_SYSTEM_DEFAULT'])
  } else {
    commit('SET_ROLES', res.roles)
  }
  commit('SET_USER', res.user)
}

mutations: {
  SET_USER: (state, user) => {
    state.user = user
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
},
state: {
  token: getToken(),
  user: {},
  roles: [],
  // 第一次加载菜单时用到
  loadMenus: false,
  // 消息列表
  notices: []
}

在这里我们可以看到,在请求登录接口获得返回信息后,将用户信息通过提 mutations
存放在 state 中。

登录接口范蝴蝶用户信息
这是登录接口返回的用户信息,里面 role 字段里可以看到它是一个数组。

验权

v-permission 是eladmin的一个自定义指令
到处都可以看到操作表单时候的v-permission字段

<el-table-column
  v-permission="['admin', 'user:edit', 'user:del']"
  label="操作"
  align="center"
  fixed="right"
>
	<template slot-scope="scope">
	<udOperation
	  :data="scope.row"
	  :permission="permission"
	  :disabled-dle="scope.row.id === user.id"
	>
	</udOperation>
	</template>
</el-table-column>

与之对应的是传给组件的 permission

它是在 data 中定义的权限列表

permission: {
  add: ['admin', 'user:add'],
  edit: ['admin', 'user:edit'],
  del: ['admin', 'user:del']
}

再来看 src/components/Permission.js文件

inserted(el, binding, vnode) {
  // 解构赋值拿到v-permission绑定的值
  const { value } = binding
  // 获取gatters里面的roles(user下的roles)
  const roles = store.getters && store.getters.roles
  if (value && value instanceof Array && value.length > 0) {
    const permissionRoles = value
	// 判断roles里面是否含有v-permission绑定的值
    const hasPermission = roles.some(role => {
      return permissionRoles.includes(role)
    })

    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  } else {
    throw new Error(`使用方式: v-permission="['admin','editor']"`)
  }
}

v-permission做了什么事情

对比于下方 v-permission 和 自定义的permission。我们来看一下这个自定义指令做了什么事情

<el-table-column
  v-permission="['admin', 'user:edit', 'user:del']"
  label="操作"
  align="center"
  fixed="right"
>
	<template slot-scope="scope">
	<udOperation
	  :data="scope.row"
	  :permission="permission"
	>
	</udOperation>
	</template>
</el-table-column>
permission: {
  add: ['admin', 'user:add'],
  edit: ['admin', 'user:edit'],
  del: ['admin', 'user:del']
}

在这里,我打印 v-permission 得到的是(对应Permission.js文件中接收的 binding)
在这里插入图片描述
再打印看看用户的 roles(对应存在vuex里的 user.roles)
在这里插入图片描述
我们发现,当登录管理员的时候,打印出来的是上图。

结论

所以如果要让管理员拥有对某个表格的增删改权限
只需要在表格 v-permission 列表中添加 ‘admin’ 字段就可以了。

用户

用户角色

对于普通用户,我们打印他的 user.role 如下图
在这里插入图片描述
在普通用户登录状态下,数据库中存储了当前用户可以操作按钮的全部记录。

用户结论

当检查用户的权限能否操作当前按钮,会获取当前用户所有的按钮权限,然后跟当前绑定的 v-permission 的值比对。当匹配到了,就代表用户可以操作此权限。

所以要给用户分配某个按钮权限

  1. 需要在 v-permission 中写上当前权限标识。
  2. 然后在菜单页面,添加按钮,然后写上相应的权限标识。
  3. 再在角色管理页面给相应用户分配这个权限。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值