学习笔记之vue根据权限动态添加路由

路由守卫判断

    router.beforeEach((to, from, next) => {
      if (to.path == '/login') {
        sessionStorage.removeItem('user');
      }

      if (!user && to.path !== '/login'&&location.search !== '?validate') {
        next({ path: '/login' })
      } else {
        next()
      }
})

点击登陆后，用addRoutes实现动态路由

    this.$router.addRoutes([].concat(routers));

之前通过$router.options.routes访问路由数据实现动态菜单，但这个数据不是响应式的，无法追踪动态路由的变化 所以点击登录后的代码如下

    this.$router.options.routes = routers;
    this.$router.addRoutes([].concat(routers));

addRoutes和Vuex一样都是刷新后数据会清空,刷新会导致Vue重新实例化，路由也恢复到了初始路由 这个时候已经存储了登录信息，则在main.js里面根据已存储的登录信息设置路由

    let user = JSON.parse(sessionStorage.getItem('user'));

    const defaultRoutes =user && user.owner.type == 'area'?routes.city :user && user.owner.type == 'zlm'?routes.admin:user && user.owner.type == 'hotel'?routes.hotel:user && user.owner.type == 'hotel_group'?routes.group :routes.home;

    const router = new VueRouter({
      routes: defaultRoutes
    })