vue 用户权限菜单管理之动态路由添加和刷新问题

用户权限菜单管理思路：

1.给不同的用户设置不同的权限规则，存在后台的数据库中。

我这里后台用的是nodejs+express+mongodb数据库写的，这里定义了两个用户，一个能访问四个路由地址，另一个能访问两个。

2.在vue-router中将公告路由和有权限的路由表区分。

我是将公共路由和动态添加的路由表分成两个JS文件写的（分模块）

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index'

Vue.use(VueRouter)

// 公共路由表  只留一个登录页，保证用户都能访问到
const routes = [
  {
    path: '/login',
    meta: {title:'登录页'},
    component: () => import( '@/views/Login.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//将所有涉及到的权限路由都添加在这个文件，主要依靠meta路由元信息中定义的role属性区别!!!!  
//举例
  
{
     path: '/home/goout',
     meta: {role:'goout'},
     component: () => import( '@/views/Home/Goout.vue')
},

 3.过滤出符合用户条件的动态路由表。重要！！！

我是把过滤路由封装了一个函数

//判断一级路由的权限
function hasPermission(roles,item){
    if(item.meta && item.meta.role){
        //includes返回布尔值
        return roles.includes(item.meta.role)
    }else{
        return true;
    }
}

// routes：涉及权限的所有路由表文件 类型为[]
// roles:用户定义所能访问的路由数据，后台返回的role['','']
function filterRoutes(routes,roles){
    var hasRoutes = routes.filter((item)=>{
        //item :每一个有权限的路由对象
        // 一级路由
        if(hasPermission(roles,item)){
            // 子路由
            if(item.children && item.children.length>0){
                // 递归判断子路由的子路由
                item.children = filterRoutes(item.children,roles)
            }
            return true;
        }else{
            return false;
        }
    })
    return hasRoutes;
}
export default filterRoutes;

4. 登录成功，拿回用户信息（包含用户所能访问路由权限）保存在vuex中。并且动态添加路由

//vuex中的代码


//导入filterRoutes封装的函数
state: {
    userinfo:{},
}
getters:{
    finalRoutes(state){
      return filterRoutes( routes, state.userinfo.roles )
    }
 },



//登录页面的代码：登录时添加  利用router.addRoutes()

this.$router.addRoutes( this.$store.getters.finalRoutes )

5. 登录成功，通过添加的路由列表，动态渲染菜单项，但此时也会有新的问题产生！！

动态添加的路由，在页面刷新后路由数据就会丢失，页面空白！！！解决办法：

// 解决页面刷新，路由丢失


//思路：获取本地的token或者vuex，判断它们存在与否，若存在，再添加一遍动态路由！
//veux需要持久化存储；token后台生成；

//这段代码是添加在vue-router的index.js中的，
var token = localStorage.getItem('token')
  if(token){
      router.addRoutes( store.getters.finalRoutes )
 }