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