最近在用Vue做專案的時候，遇到前端頁面的訪問許可權控制問題。參考了網上一些文章的思路，並且自己動手做了一個demo。
應用場景如下：一個網站多個角色，例如admin（管理員）,guest（普通客戶），不同許可權的使用者能訪問的網頁許可權不同。
許可權admin可看到admin網頁和Guest頁，許可權guest只能訪問Guest。
實現思路如下：
1、網頁路由（route）中定義的每個路由都有meta屬性，屬性值防止可訪問該路由的值。
2、路由的全域性前置守衛（beforeEach）會判斷路由使用者是否登入（未登入跳轉至登入介面），以及登入使用者是否有許可權檢視該頁面（無許可權跳轉至tips頁面）。
3、home中導航樹根據許可權資訊的不同，渲染不同的頁面。

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;