# 权限管理

RBAC权限管理模块

# 1. 运行示例

d2-crud-plus-example中提供权限管理模块，位于/src/business/modules/permission下

# 1.1 启动后端【java】

# 1.1.1 克隆项目

git clone https://github.com/greper/d2-crud-plus-server.git
# 导入idea或eclipse

【注意：需要安装lombok插件】

# 1.1.2 创建数据库

创建数据库`d2p_pm`
server启动后会自动创建表

# 1.1.3修改数据库连接配置

# ./api-service/src/main/resources/application.xml
spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/d2p_pm?characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true

# 1.1.4 启动api-server

右键 `com\veryreader\d2p\api\ApiServerApplication.java`
点击`RUN`

# 1.2 启动d2-crud-plus-example

开启权限模块

cd /packages/d2-crud-plus-example
npm run dev:pm

# 或者
# 修改.env.development文件：VUE_APP_PM_ENABLED=true
cd /packages/d2-crud-plus-example
npm run dev

# 1.3 查看效果

系统默认数据不允许修改，如需体验，请自行添加数据进行测试

# 2 按钮权限

# 2.1 directive控制

// 支持数组
<el-button v-permission="'permission:role:add'">添加角色</el-button>

# 2.2 代码控制

export default {
    created(){
        if(this.hasPermissions('permission:role:add')){ //支持数组
            console.log("您拥有添加权限")
        }
    }
}

# 3 权限模块如何接入到你的d2-admin项目中

在.env中配置VUE_APP_PM_ENABLED = true
复制example中 src/business/modules/permission 到你的d2-admin项目中
安装permission模块

// 在main.js中加入
import '@/business/modules/permission' // 加载permission

在/src/store/modules/d2admin/modules/account.js中加入以下代码
用于注销时清空权限信息

    logout ({ commit, dispatch }, { confirm = false } = {}) {
      /**
       * @description 注销
       */
      async function logout () {
        // 删除cookie
        util.cookies.remove('token')
        util.cookies.remove('uuid')
        // 清空 vuex 用户信息
        await dispatch('d2admin/user/set', {}, { root: true })

        // 注销登录时清空permission信息
        commit('permission/clear', true, { root: true })

        // 跳转路由
        router.push({
          name: 'login'
        })
      }

登录请求由模拟改为请求真实后端

  SYS_USER_LOGIN (data = {}) {
    // 模拟数据
    mock
      .onAny('/login')
      .reply(config => {
        const user = find(users, tools.parse(config.data))
        return user
          ? tools.responseSuccess(assign({}, user, { token: faker.random.uuid() }))
          : tools.responseError({}, '账号或密码不正确')
      })
    // 接口请求
    return requestForMock({
      url: '/login',
      method: 'post',
      data
    })
  }

修改为如下

 SYS_USER_LOGIN (data = {}) {
    // 登录请求真实后端
    return request({
      url: '/login',   // 真实的后端地址 /api/login
      method: 'post',
      data
    })
  }

# 6. 配置本地代理

解决本地开发时请求后台接口的跨域问题在vue.config.js中添加如下配置

module.exports = {
  publicPath,
  lintOnSave: true,
  devServer: {
    publicPath, // 和 publicPath 保持一致
    disableHostCheck: process.env.NODE_ENV === 'development', // 关闭 host check，方便使用 ngrok 之类的内网转发工具
    //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓配置如下代理↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    proxy: {
      '/api': { // 请求/api/时代理到http://localhost:7070/api这个地址上去
        target: 'http://localhost:7070',
        ws: true
      }
    }
  }
}

# 4 如何适配你自己的后端权限接口

请修改 @/src/business/modules/permission/store/api.js

import { request } from '@/api/service'
export function getPermissions () {
  return request({
    url: '/auth/user/permissions',
    method: 'get'
  }).then(ret => {
    // 如果使用你自己的后端，需要在此处将返回结果改造为本模块需要的结构
    // 结构详情，请参考示例中打印的日志 ”获取权限数据成功：{...}“ （实际上就是“资源管理”页面中列出来的数据）
    return ret
  })
}

使用配套后端，无需改造，开箱即用，d2-crud-plus-server (opens new window)

# 5. 权限执行逻辑说明

更多详细信息请参考 @/src/business/modules/permission/index.js

// 开启权限模块
if (isEnabled) {
  // 注册v-permission指令, 用于控制按钮权限
  Vue.use(permissionDirective)
  // 注册权限的store模块，用于存储当前权限数据
  store.registerModule('permission', storeModule)
  // 注册路由钩子
  // 通过路由守卫，在登录成功后拦截路由，从后台加载权限数据
  // 然后将权限数据转化为菜单和路由，添加到系统中
  registerRouterHook()
}

# 6. d2-crud-plus-with-d2admin-starter

觉得自己集成挺麻烦的？
这里已经准备了一个d2-crud-plus与d2-admin集成好了的启动项目
d2-crud-plus-with-d2admin-starter (opens new window)

d2-crud-plus-with-d2admin-starter-带权限版 (opens new window)

参考文章：如何从零开始搭建一套带权限的后台管理系统 (opens new window)

← values-format 代码生成 →