基于Vue-Router和Vuex的页面访问权限控制

最近在用Vue做项目的时候，遇到前端页面的访问权限控制问题。参考了网上一些文章的思路，并且自己动手做了一个demo。
应用场景如下：一个网站多个角色，例如admin（管理员）,guest（普通客户），不同权限的用户能访问的网页权限不同。
权限admin可看到admin网页和Guest页，权限guest只能访问Guest。
实现思路如下：
1、网页路由（route）中定义的每个路由都有meta属性，属性值防止可访问该路由的值。
2、路由的全局前置守卫（beforeEach）会判断路由用户是否登录（未登录跳转至登录界面），以及登录用户是否有权限查看该页面（无权限跳转至tips页面）。
3、home中导航树根据权限信息的不同，渲染不同的页面。

两个用户名和密码：
1、admin， 123456，可查看两个页面
2、guest， 123456只能查看一个页面
项目git地址(https://github.com/xubaodian/savefycetificate.git)

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
import Admin from '@/components/Admin'
import Guest from '@/components/Guest'
import Tips from '@/components/Tips'
import $ from "jquery"

Vue.use(Router)

let routerMap = [
  {
    path: '/',
    redirect:'/login',
    component: Login,
    meta: ['admin', 'user']
  },
  {
    path:'/login',
    name:'login',
    component: Login,
    meta: ['admin', 'user']
  },
  {
    path:'/tips',
    name:'tips',
    component: Tips,
    meta: ['admin', 'user']
  },
  {
    path:'/home',
    name:'home',
    component: Home,
    redirect: '/home/guest',
    meta: ['admin', 'user'],
    children: [
      {
        path:'admin',
        name:'admin',
        component: Admin,
        meta: ['admin']
      },
      {
        path:'guest',
        name:'guest',
        component: Guest,
        meta: ['admin', 'user']
      }
    ]
  }
 ]

let route =  new Router({
  routes: routerMap
})

route.beforeEach((to, from, next) => {
  //获取用户权限信息，为空即没登录，跳转至登录页
  if (to.path === '/login') {
    next();
  } else {
    let role = route.app.$options.store.state.roles;
    if (role === '') {
      next('/login');
    } else {
      if(to.matched.every(item => item.meta.indexOf(role) > -1)) {
        next();
      } else {
        next('/tips');
      }
    }
  }
});

export default route;