一、重要知识点总结以及登录功能实现

二、权限管理菜单的增删改查实现

1. 用户管理
   
   
2. 角色管理
   
   
3. 菜单管理
   

1. 路由配置

// 2.所有路由都封装到这个常量中
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{//这里的内容会在<router-view :key="key" />标签渲染
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },

  {
    path: '/security',
    component: Layout,
    redirect: '/security/user',
    meta: { title: '权限管理', icon: 'el-icon-lock' },
    children: [
      {
        path: 'user',
        name: 'User',
        component: () => import('@/views/security/user/index'),
        meta: { title: '用户管理'}
      },
      {
        path: 'role',
        name: 'Role',
        component: () => import('@/views/security/role/index'),
        meta: { title: '角色管理'}
      },
      {
        path: 'menu',
        name: 'menu',
        component: () => import('@/views/security/menu/index'),
        meta: { title: '菜单管理'}
      },
    ]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

2. 用户管理功能

2.1 后端接口API介绍

1. 根据所传json，查询符合条件的用户，json为空，显示所有，post请求.另外，还提供了一个处理分页的接口，也可以查询符合条件的用户
   
   
2. put请求，表示根据json修改用户，但是不会修改密码
   
3. put请求，根据用户id和密码，修改用户密码
   
4. delete请求，根据id删除用户
   
5. put请求，更新用户所有角色，uid为用户id，rids是一个数组，表示角色，这里选择的角色将成为指定用户的角色
   
6. post请求，添加用户
   

2.2 前端api接口

2.3 页面和逻辑编写

3. 角色管理功能

3.1 数据回显

1. 拿到当前用户id，先清除回显数据，然后请求数据，完成数据回显。这样用户没有点击修改按钮，下次进入，依然是实时数据
   
   
2. 点击修改按钮
   

4. 菜单管理功能

4.1 树形结构数据处理算法

/**
 * 构造树型结构数据
 * @param {*} source 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 * @param {*} rootId 根Id 默认 0
 */
export function treeData (source, id, pid, children, rootId) {
  id = id || 'id'
  pid = pid || 'pid'
  children = children || 'children'
  rootId = rootId || 0
  const cloneData = JSON.parse(JSON.stringify(source))// 对源数据深度克隆
 return cloneData.filter(father => {
    const branchArr = cloneData.filter(child => father[id] == child[pid])// 返回每一项的子级数组
    branchArr.length > 0 ? father[children] = branchArr : delete father[children]// 如果存在子级，则给父级添加一个children属性，并赋值
    return father[pid] == rootId // 返回第一层
  })
}

/**
 * 树形结构解析，构造为普通形式
 */
export function unTreeData(source,children){
  children = children || 'children'
  let cloneData = JSON.parse(JSON.stringify(source))// 对源数据深度克隆
  let arr = []//保存最终结果
  unTreeDatadd(cloneData,children,arr)//递归解析树结构，解析结果放在arr中
  return arr;//将arr返回
}
function unTreeDatadd(source,children,arr){
  //遍历数组
  source.filter(father=>{
    if(father[children]){//如果当前元素有child，将当前元素加入arr，然后递归它的儿子加入arr，儿子都递归完，删除当前元素的children属性
      arr.push(father)//将当前元素加入arr
      unTreeDatadd(father[children],children,arr)//递归儿子
      delete father[children]//删除children
    }else{//如果当前元素没有child
      arr.push(father)//直接添加到arr
    }
  })
}

三、权限控制功能实现

1. admin用户登录
   
2. 作者用户登录
   

1. 当用户登录成功后，根据用户id查询它拥有的角色，和菜单权限，保存到vuex中
2. 将路由拆分（把原来完整的进行拆分）

1. 常量路由：无论何种用户，都可以操作的路由，比如登录，首页。
2. 异步路由：根据不同用户，展示不同的路由。注意，路由不是从服务器获取到的，服务器返回的只是一个标识，我们需要进行比对，隐藏不需要的路由
3. 任意路由：404等路由，用户操作错了，从定向的路由

1. 获取异步路由，我们需要通过异步路由，进行比较过滤，判断哪些路由不需要显示

1. 对于路由，我们主要通过查询数据库配置的菜单，取出path属性，与前端的路由进行比较，过滤前端的路由，path相同的路由，会显示，path不同的路由会被过滤
   
   

1. 拆分路由

2. 将用户角色和菜单权限保存到vuex，然后过滤路由

//比较路由，返回需要展示的异步路由
const compareasyncRoutes = (asyncRoutes,routes)=>{
  return asyncRoutes.filter(item =>{
    if(routes.indexOf(item.path)!=-1){//如果当前路由，用户拥有权限，就展示
      if(item.children&&item.children.length){//如果有children就递归
        item.children = compareasyncRoutes(item.children,routes)
      }
      return true;
    }
  })
}

3. 使用模板需要做的额外更改

1. 如下可看到，模板中使用的是常量路由
   

4. 解决刷新页面vuex中数据丢失，路由丢失问题

/**动态路由需要解决，刷新路由丢失问题**/
    //判断是否为刷新页面，vuex中无数据，则为刷新页面
    if(store.state.user.routesResult.length === 0 ){
      // 获取用户信息(关于异步路由的东西我放这里了)
      store.dispatch('user/getInfo').then(()=>{
        next({path:to.path})
      })
    }else{
      next()
    }

四、按钮权限控制

1. 需要设定浏览权限（因为我们使用element ui组件，它没法直接选父菜单，）
   
2. 超级管理员的权限
   
3. 普通用户的权限
   
4. 超级管理员看到的页面
   
5. 普通用户看到的页面
   

1. 修改element ui 源码解决问题

2. 实现按钮权限

1. 通过菜单权限来判断
   
2. 只需要判断就可以了

<el-button type="primary" slot="reference" v-show="$store.state.user.buttons.indexOf('btn:security')!=-1">添加</el-button>

1. 超级管理员看到的页面
   
2. 普通用户看到的页面