用户创建任务权限前端控制功能说明

功能概述

在用户登录后，系统会返回 canCreateTask 字段到 getInfo 接口响应中，并存储到 APP 的 Vuex store。当用户在任务创建页面点击任务类型时，会检查该权限字段，如果值为 '0'（无权限），则弹出提示"您没有权限创建任务"，阻止用户进入任务创建表单页面。

实现内容

1. 后端接口修改

1.1 getInfo 接口返回 canCreateTask

文件：ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysLoginController.java

修改位置：第 236-245 行

修改内容：
java AjaxResult ajax = AjaxResult.success(); ajax.put("user", user); ajax.put("roles", roles); ajax.put("permissions", permissions); ajax.put("branchCompanyId", branchCompanyId); ajax.put("branchCompanyName", branchCompanyName); ajax.put("branchCompanies", branchCompanies); ajax.put("oaUserId", user.getOaUserId()); ajax.put("canCreateTask", user.getCanCreateTask()); // ✅ 新增 return ajax;

说明：在 getInfo 接口返回的 JSON 中添加 canCreateTask 字段，其值来自 SysUser.canCreateTask。

2. APP 端存储层修改

2.1 添加 constant 常量

文件：app/utils/constant.js

修改内容：
javascript const constant = { userId: 'vuex_userId', avatar: 'vuex_avatar', name: 'vuex_name', nickName: 'vuex_nickName', roles: 'vuex_roles', permissions: 'vuex_permissions', deptId: 'vuex_deptId', branchCompanyId: 'vuex_branchCompanyId', branchCompanyName: 'vuex_branchCompanyName', oaUserId: 'vuex_oaUserId', canCreateTask: 'vuex_canCreateTask' // ✅ 新增 }

说明：添加 canCreateTask 的存储键名常量，用于在本地存储中保存该字段。

2.2 Vuex State 添加字段

文件：app/store/modules/user.js

修改位置 1：第 11-23 行

state: {
  token: getToken(),
  userId: storage.get(constant.userId),
  name: storage.get(constant.name),
  nickName: storage.get(constant.nickName),
  avatar: storage.get(constant.avatar),
  roles: storage.get(constant.roles),
  permissions: storage.get(constant.permissions),
  deptId: storage.get(constant.deptId),
  branchCompanyId: storage.get(constant.branchCompanyId),
  branchCompanyName: storage.get(constant.branchCompanyName),
  oaUserId: storage.get(constant.oaUserId),
  canCreateTask: storage.get(constant.canCreateTask)  // ✅ 新增
},

说明：在 Vuex state 中添加 canCreateTask 字段，从本地存储中读取初始值。

修改位置 2：第 65-72 行（mutations）

SET_OA_USER_ID: (state, oaUserId) => {
  state.oaUserId = oaUserId
  storage.set(constant.oaUserId, oaUserId)
},
SET_CAN_CREATE_TASK: (state, canCreateTask) => {  // ✅ 新增
  state.canCreateTask = canCreateTask
  storage.set(constant.canCreateTask, canCreateTask)
}

说明：添加 SET_CAN_CREATE_TASK mutation，用于更新 state 和本地存储。

修改位置 3：第 119-132 行（GetInfo Action）

commit('SET_USER_ID', userId)
commit('SET_NAME', username)
commit('SET_NICK_NAME', nickname)
commit('SET_AVATAR', avatar)
commit('SET_DEPT_ID', deptId)
commit('SET_BRANCH_COMPANY_ID', res.branchCompanyId)
commit('SET_BRANCH_COMPANY_NAME', res.branchCompanyName)
commit('SET_OA_USER_ID', res.oaUserId)
commit('SET_CAN_CREATE_TASK', res.canCreateTask)  // ✅ 新增
resolve(res)

说明：在 GetInfo action 中提交 SET_CAN_CREATE_TASK mutation，将接口返回的 canCreateTask 存储到 Vuex。

3. APP 端权限控制

3.1 任务创建页面权限检查

文件：app/pages/task/create.vue

修改位置 1：第 28-30 行（引入 mapState）

<script>
import { mapState } from 'vuex'  // ✅ 新增

export default {

修改位置 2：第 72-78 行（添加 computed）

computed: {
  ...mapState({
    canCreateTask: state => state.user.canCreateTask
  })
},

说明：使用 Vuex 的 mapState 辅助函数，将 canCreateTask 映射到组件的计算属性。

修改位置 3：第 81-90 行（权限检查逻辑）

methods: {
  selectTaskCategory(category) {
    // 检查是否有创建任务的权限
    if (this.canCreateTask !== '1') {
      this.$modal.msgError('您没有权限创建任务')
      return
    }
    
    // 跳转到对应的任务创建页面
    uni.navigateTo({
      url: `${category.page}?categoryName=${category.name}&categoryType=${category.type}&taskType=${category.taskType}`
    })
  }
}

核心逻辑：
1. 在点击任务类型时，首先检查 this.canCreateTask 的值
2. 如果值不等于 '1'，则弹出错误提示"您没有权限创建任务"，并 return 阻止后续执行
3. 只有当 canCreateTask === '1' 时，才允许跳转到具体的任务创建页面

数据流向

SQL Server (OA_User.OA_Power)
      ↓
[用户同步] CASE WHEN OA_Power LIKE '%,020101,%' THEN '1' ELSE '0' END
      ↓
MySQL (sys_user.can_create_task)
      ↓
[登录后] getInfo 接口
      ↓
{
  "user": {...},
  "canCreateTask": "1" or "0"
}
      ↓
[APP] Vuex Store (state.user.canCreateTask)
      ↓
[本地存储] vuex_canCreateTask
      ↓
[页面权限控制] create.vue 检查权限
      ↓
允许创建 or 提示"您没有权限创建任务"

使用场景

场景 1：有权限的用户

用户登录后，canCreateTask 为 '1'
点击底部 TabBar "创建任务" 进入任务类型选择页面
点击任何一种任务类型（转运任务、维修保养、加油等）
✅ 正常跳转到对应的任务创建表单页面

场景 2：无权限的用户

用户登录后，canCreateTask 为 '0' 或 null
点击底部 TabBar "创建任务" 进入任务类型选择页面
点击任何一种任务类型
❌ 弹出提示："您没有权限创建任务"
❌ 阻止跳转，停留在任务类型选择页面

验证方法

1. 后端验证

查询用户权限：
sql SELECT user_name, nick_name, can_create_task, oa_user_id FROM sys_user WHERE del_flag = '0' ORDER BY can_create_task DESC;

测试 getInfo 接口：
```bash

登录获取 token

POST http://localhost:8080/login
{
"username": "test_user",
"password": "password"
}

获取用户信息

GET http://localhost:8080/getInfo
Authorization: Bearer {token}

响应示例

{
"code": 200,
"msg": "操作成功",
"user": {...},
"canCreateTask": "1" // ✅ 确认包含此字段
}
```

2. APP 端验证

步骤 1：登录 APP

步骤 2：打开开发者工具，查看 Vuex State
javascript // 在控制台输入 console.log(this.$store.state.user.canCreateTask) // 输出应为 "1" 或 "0"

步骤 3：点击底部 TabBar "创建任务"

步骤 4：在任务类型选择页面，点击任意任务类型

预期结果：
- 有权限用户（canCreateTask === '1'）：正常跳转到创建表单
- 无权限用户（canCreateTask !== '1'）：弹出提示"您没有权限创建任务"

常见问题

Q1：新用户登录后 canCreateTask 为 null，如何处理？

A：需要先执行用户同步接口，从 OA 系统同步权限字段：
bash POST http://localhost:8080/system/dept/sync/user

同步后，can_create_task 字段会根据 OA_Power 自动填充。

Q2：如何给用户开通创建任务权限？

A：有两种方式：

方式 1（推荐）：在 OA 系统中修改用户的 OA_Power 字段
- 确保 OA_Power 包含 ,020101,（注意前后都有逗号）
- 执行用户同步接口

方式 2：直接修改数据库
sql UPDATE sys_user SET can_create_task = '1' WHERE user_name = '用户名';

注意：方式 2 的修改会在下次用户同步时被覆盖，建议使用方式 1。

Q3：用户权限更新后，需要重新登录吗？

A：是的，有两种方式生效：

方式 1：用户退出登录，重新登录
- 登录时会调用 getInfo，获取最新的 canCreateTask

方式 2：前端主动刷新用户信息
javascript this.$store.dispatch('GetInfo')

Q4：如何在前端其他页面判断用户是否有创建权限？

A：参考 create.vue 的实现方式：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      canCreateTask: state => state.user.canCreateTask
    })
  },
  methods: {
    checkPermission() {
      if (this.canCreateTask !== '1') {
        this.$modal.msgError('您没有权限创建任务')
        return false
      }
      return true
    }
  }
}

注意事项

字段类型：canCreateTask 是字符串类型 CHAR(1)，值为 '0' 或 '1'，比较时必须使用字符串

✅ 正确：canCreateTask !== '1'
❌ 错误：canCreateTask !== 1 或 !canCreateTask

null 值处理：未同步的用户 canCreateTask 可能为 null

在权限判断时，null !== '1' 返回 true，会阻止操作，符合安全原则

数据同步：确保定期执行用户同步，保持权限字段与 OA 系统一致
前端存储：canCreateTask 会同时存储在：

Vuex State（内存）
LocalStorage（持久化）
页面刷新或重启 APP 时会从 LocalStorage 恢复

安全性：

前端权限检查只是用户体验优化，不影响后端安全
后端仍需在创建任务的接口中进行权限验证

技术总结

本次修改实现了完整的**前端权限控制流程**：

✅ 后端接口：getInfo 返回 canCreateTask
✅ 数据存储：Vuex + LocalStorage 双重存储
✅ 权限检查：页面级权限拦截
✅ 用户提示：友好的错误提示信息
✅ 数据同步：与 OA 系统权限保持一致

优点：
- 统一的权限数据源（OA_Power）
- 自动同步机制
- 前端快速响应，避免无效请求
- 良好的用户体验

局限性：
- 前端权限可被绕过（开发者工具修改）
- 需要依赖后端接口的二次验证