vue开发后台管理系统有感

　　

使用vue开发后台近一个月，今天终于完成得差不多了，期间也遇到很多的问题，所以利用现在的闲暇时间做个总结

使用element-ui基础，这次使用了vue-element-admin(github地址)，一个后台前端解决方案，虽然站在巨人的肩膀上，但是要改成符合公司的后台，改变也是巨大的

改变：

1.公司的登录接口，把登录者信息，角色，权限列表一次返回

2.我一再建议公司把菜单配置放在前端，但是最终还是没能说服他们，所以开始撸码咯，这里有个需要注意的就是

动态配置路由，不能这样写 component: import ('xx/xxx.vue')，由于webapp没有打包这些vue文件，component是空的

应该写成component: componentArrray[componentUrl]

function getMenuTree(data, pid = 0) {
  let arr = []
  data.map(v => {
    if (v.path === '/home' || v.path === '/profile') return
    let path = '/' + v.component
    let redirect = (v.children && v.children.length && v.children[0].component) ? ('/' + v.children[0].component) : ''
    let component = pid === 0 ? Layout : (components[v.component] || RouterView)
    let name = v.component ? v.component : v.name
    let meta = {
      title: v.name,
      icon: v.icon
    }
    let obj = {
      path: path,
      component: component,
      name: name,
      meta: meta,
      children: []
    }
    if (redirect) {
      obj.redirect = redirect
    }
    if (v.children && v.children.length) {
      obj.children = getMenuTree(v.children, 1)
    }
    arr.push(obj)
  })
  return arr
}

components就是components.js export出来的，这个解决方案vue-element-admin issue也有提到

3.既然做了动态路由，就肯定会使用到按钮级权限

看起来很复杂，其实很简单，后台返回权限数组（以为数组），长成这样['menu;edit', 'menu:add'，这个数组是新增菜单的时候添加的，我想说明的是，前端做重要的权限认证即可，完整的权限认证应该在后台做，因为前端做起来也很麻烦

真正的按钮权限，就是控制按钮的显示和隐藏，首先我们要知道这个按钮是使用哪个权限，这个很关键哦，要和后台人才沟通好，没有数据的铺垫，是无法做按钮权限的，然后这样写 v-if="hasPermission('menu:add')" menu:add就是其中的一个权限，要改成对应的权限

hasPermission方法也相当简单：

function hasPermission(value) {
   const permissions = store.getters.permissions
   return permissions.includes(value)
}

store.getters.permissions是登录的时候后台返回的，你要保存在vuex中，可以另外再提供一个接口来刷新权限列表，至此按钮权限就完成了，就是这么简单，认真细致一个一个加v-if即可

4.我觉得做后台很难的一点就是，做一个复杂并且公用的详情页面，然而这个需求几乎在所有公司都是必备的

此次，我选择用弹出层来做，弹出层里面大致有10个tab切换，涉及的页面组件将近20个

1.要把row（row指的是选中的list的数据，row是一个对象）将其保存到vuex state，方便各位组件读取row里面的数组，

对象有一个好处，就是每次修改，都会触发tab组件的watch row，如果是wath row里面rowId的话，当点击相同的列表，会导致无法触发watch，导致tab组件无法通过watch调用接口

2.不要用keepalive，会导致watch row变化触发时，所有的组件一起被更新

3.组件难的就是组件的复用，其实实现的方法有很多，应当从体验触发

比如说多个组件，使用统一的loading，兄弟组件，数组之间的共享

5. 后台前端用什么来做缓存，到底使用js-cookie，还是localStorage，sessionStorage

我推荐用js-cookie

为什么，cookie可多窗口共享，比如说我打开另一个页面，还能读取到cookie，同时关闭浏览器，就会自动清除缓存

sessionStorage不能多窗口共享，只是在当前窗口使用， 重新打开一个新的窗口，发现要重新登录，真的好奇葩，好难用，sessionStorage和localStorage更适合在手机上用，因为它是在一个窗口内运行的，不存在多窗口共享问题

localStorage虽然可以多窗口共享，但是它的弊端不能设置过期时间，同时关闭浏览器，不会自动清除缓存，这个对于后台安全来做很致命

6.逐渐花裤衩的这个后台系统，其实很多地方需要改动，感觉可以重写了（更新2019-8-22）

从router开始，应该要做成

[
  {
　    path: '/login',
      omponent: Login
  },
  {
　    path: ' '/',
       component: Layout,
      children: [
        { path: 'system',  component: RouterView, children: [] },
        { path: 'test' }
      ]
  }
]

这样就不会出现每个菜单都指向Layout，这样也可以减少菜单配置必须设置成两层，如下，我明明只要显示控制台一个菜单，但是必须写成嵌套

持续更新ing