# class201215-admin

**Repository Path**: xxpromise/class201215-admin

## Basic Information

- **Project Name**: class201215-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-05-08
- **Last Updated**: 2021-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-admin

## 项目接口文档

- 商品、分类、品牌：http://39.98.123.211:8216/swagger-ui.html#/
- 活动与优惠券：http://39.98.123.211:8200/swagger-ui.html#/
- 购物车：http://39.98.123.211:8201/swagger-ui.html#/
- CMS：http://39.98.123.211:8210/swagger-ui.html#/
- 评论：http://39.98.123.211:8209/swagger-ui.html#/
- sku 详情：http://39.98.123.211:8202/swagger-ui.html#/
- 搜索：http://39.98.123.211:8203/swagger-ui.html#/
- 订单：http://39.98.123.211:8204/swagger-ui.html#/
- 支付：http://39.98.123.211:8205/swagger-ui.html#/
- 用户：http://39.98.123.211:8208/swagger-ui.html#/
- 权限：http://39.98.123.211:8170/swagger-ui.html#/

## 权限管理功能

修改 elementUI 源码:

1. element-ui 没有实现按需引入打包

- 修改 `node_modules\element-ui\lib\element-ui.common.js` 文件
- 第 25382 行源码
- 去掉 `includeHalfChecked &&`

```js
// 原代码
if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
// 修改后
if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
```

2. element-ui 实现了按需引入打包

- 修改 `node_modules\element-ui\lib\tree.js` 文件
- 第 1051 行源码
- 去掉 `'includeHalfChecked' &&`

```js
// 原代码
if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
// 修改后
if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
```

### 功能演示

- 菜单管理
  - 设置所有可以访问的菜单（路由），菜单对应的按钮权限值
- 角色管理
  - 设置当前角色可以访问菜单和按钮权限值
- 用户管理
  - 设置可以用来登录的用户，同时分配一个或多个角色值

### 路由权限管理

1. 用户访问登陆页面，点击登陆按钮进行登陆

- 此时会发送请求，登陆成功会将 token 存在 vuex 和 cookie 中，然后跳转到首页

2. 当路由跳转到首页时，会触发路由导航守卫（全局前置守卫 beforeEach 和全局后置守卫 afterEach）

- 判断是否有 token（看用户是否登录过）
- 有
  - 判断当前路由路径是否白名单（登录）中
    - 是（在 login 页面）
      - 跳转到首页
    - 不是（不在 login 页面）
      - 判断是否有用户数据（从 vuex 中读取）
        - 有
          - 放行
        - 没有
          - 需要请求用户数据（同时还检验 token 是否有效）
            - 请求成功
              - 放行
            - 请求失败
              - 说明 token 是过期了或无效，清空用户数据、token、路由菜单，回到登录页面
- 没有
  - 判断当前路由路径是否在白名单（登录）中
    - 是
      - 调用 next()访问（放行）
    - 不是
      - 跳转到登录页面，同时添加一个 redirect 参数（为了，将来登录成功后，跳转到需要访问的页面去）

3. 在请求用户数据的时候，会得到用户拥有的权限路由表 routes 和按钮权限列表 buttons

- 默认一上来就定义了两个路由表
  - 常量路由表：constantRoutes
    - 只有 login、layout、404 页面
  - 异步路由表（需要动态加载的路由表）: asyncRoutes
    - 有所有其他功能页面（acl、product 等）
- 在请求用户数据的时候, 拿到 asyncRoutes 和 请求回来用户数据中的路由权限列表（routes），进行过滤
- 最终生成用户可以访问的路由表（routes）
- 通过 router.addRoutes()方法，将路由动态添加 router 中生效，此时用户就能够访问这些路由了
- 同时还将所有 constantRoutes 和 动态生成的路由添加到 vuex 的 routes 中，为了后续生成左侧菜单使用

4. 跳转到首页时，会加载 Layout 组件的左侧导航，此时会遍历生成菜单

- 左侧菜单根据 vuex 的 routes 来遍历生成菜单
  - 菜单基本结构为
  ```js
  <el-menu>
    // 如果只有一级菜单
    <el-menu-item>...</el-menu-item>
    // 如果有多级菜单
    <el-submenu>...</el-submenu>
  </el-menu>
  ```

### 按钮权限管理

- 定义了一个方法 hasBtnPermission
- 内部通过 vuex 获取到用户数据中按钮权限列表（buttons），调用方法时传递一个当前按钮的权限值
- 判断当前按钮的权限值是否在按钮权限列表（buttons）中，在返回 true，不在返回 false
- 为了方面所有组件使用，将其定义在 Vue 的原型上
- 所有路由的组件的功能按钮都会有自己唯一的权限值(btn.组件名称.按钮的功能)，通过 v-if 调用 hasBtnPermission 判断决定按钮的显示&隐藏
- 从而实现按钮的权限控制