一、使用全局路由守卫

1. 实现

1. 前端定义好路由，并且在路由上标记相应的权限信息
2. 判断当前要跳转的路由，用户是否有权限访问(根据路由名称到全部路由里找到对应的路由，判断用户是否具备路由上标注的权限信息
3. 没有权限则跳到事先定义好的界面(403,404之类的)。

const routerMap = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/index',
    alwaysShow: true, // will always show the root menu
    meta: {
      title: 'permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    children: [{
      path: 'page',
      component: () => import('@/views/permission/page'),
      name: 'pagePermission',
      meta: {
        title: 'pagePermission',
        roles: ['admin'] // or you can only set roles in sub nav
      }
    }, {
      path: 'directive',
      component: () => import('@/views/permission/directive'),
      name: 'directivePermission',
      meta: {
        title: 'directivePermission'
        // if do not set roles, means: this page does not require permission
      }
    }]
  }]

2. 缺点

• 加载所有的路由，如果路由很多，而用户并不是所有的路由都有权限访问，对性能会有影响。
• 全局路由守卫里，每次路由跳转都要做权限判断。
• 菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识

二、登录页与主应用分离

1. 实现

1. 将登录页与主应用放到不同的页面(不在同一个vue应用实例里)。
2. 登录成功后，进行页面跳转(真正的页面跳转，不是路由跳转)，并将用户权限传递到主应用所在页面，
3. 应用初始化之前，根据用户权限筛选路由，筛选后的路由作为vue的实例化参数，

三、使用addRoutes动态挂载路由（刷新会消失）