后端返回权限，前端如何处理（权限管理）

1、前端接收权限的格式：

[
          { path: 'permissions',
            name: 'permissions',
            meta: { title: '用户角色', icon: 'el-icon-s-help' },
            children: [
              {
                path: 'admin',
                name: 'admin',
                component: 'admin',
                meta: { title: '管理员管理', icon: 'table' }
              },
              {
                path: 'role',
                name: 'role',
                component: 'role',
                meta: { title: '角色管理', icon: 'table' }
              },
              {
                path: 'perm',
                name: 'perm',
                component: 'perm',
                meta: { title: '权限管理', icon: 'table' }
              }
            ]

          }
        ]

2、将获取的路由信息存入cookies中（也可以存到vuex中，看自己的想法）

Cookies.set('menuList', menuList)

3、在router->index.js中进行遍历加载

import Vue from 'vue'
import Router from 'vue-router'
import Cookies from 'js-cookie'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

export const constantRoutes = [  //静态路由
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true,
    meta: { title: '登录' }
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  }，
{ path: '*', redirect: '/404', hidden: true }
]
if(Cookies.get('menuList')){  //判断cookies中是否有menuList，如果不加判断系统会保存无法运行
const list = JSON.parse(Cookies.get('menuList')) // 获取到的cookise里的路由列表信息进行格式化
list.forEach(item => { // 循环遍历列表
  var seft = { // 循环遍历一级菜单
    path: '/' + item.path,
    name: item.name,
    component: Layout,
    meta: { title: item.meta.title, icon: item.meta.icon },
    children: []
  }
  item.children.forEach((items) => { // 循环遍历二级菜单
    seft.children.push({
      path: items.path,
      name: items.name,
      component: (resolve) => require([`@/views/${item.path}/${items.component}`], resolve), // 使用模板，否则找不到路由地址
      meta: { title: items.meta.title, icon: items.meta.icon }
    })
  })
  constantRoutes.push(seft) // 将遍历好的路由信息载入静态路由中
})
}
const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

4、在登录时刷新页面（目的是更新路由表）

   在登录页面找到登录按钮对应的函数，添加刷新指令

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
            location.reload() // 刷新页面，更新路由
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

 点击退出登录按钮时，清空cookies记录的信息

Cookies.set('menuList', '')

5、启动程序进行查看

如有啥问题，欢迎留言