权限控制

前端页面的权限控制有2种方式(role和permission), 在三个地方进行控制:

1. 左边菜单的显示隐藏

   在路由表各项的meta中添加 roles: ['admin', 'editor'] 或 permissions: ['app:read']

2. 页面内各种按钮和弹窗

   使用v-role和v-permission控制,

   <!-- 支持匹配, 比如: app:*, *:read--->
   <span
         v-permission="['app:read']"
         class="permission-alert"
         >
     Only
     <el-tag
             class="permission-tag"
             size="small"
             >app:read</el-tag> can see this
   </span>
   <el-tag
           v-role="['admin']"
           class="permission-sourceCode"
           type="info"
           >
     v-role="['admin']"
   </el-tag>
   

   也可使用@utils/permission.ts中的checkRole和checkPermission方法

   <el-tab-pane
     v-if="checkRole(['admin'])"
     label="Admin"
   >
     Admin can see this
     <el-tag
       class="permission-sourceCode"
       type="info"
     >
       v-if="checkRole(['admin'])"
     </el-tag>
   </el-tab-pane>
   

3. 逻辑代码中判断

   使用@utils/permission.ts中的checkRole和checkPermission方法