beforeEach全局鉤子管理用戶訪問權限！

 創建路由：

export default new Router({
  routes: [{
     path: '/',
     component: { template: '<div><div>公共頁面</div><router-link to="/admin1">取admin1</router-link><router-link to="/boos1">取boos1</router-link></div>' }
   },
   {
     path: '/login',
     name: 'HelloWorld',
     component: HelloWorld
   },
   {
     path: '/admin1',
     meta: {
       roles: ['admin'] //該頁面可訪問的權限
     },
     component: { template: '<div>admin頁面1</div>' }
   },
   {
     path: '/boos1',
     meta: {
       roles: ['boos'] //該頁面可訪問的權限
     },
     component: { template: '<div>boos頁面1</div>' },
   },
   { path: '*', component: { template: '<div>404未找到</div>' } }
 ]
})

模擬登錄並保存用戶信息到storage和store中：

<template>
  <div class="login">
    <p>選擇登錄身份：</p>
    <button @click="login('user')">user</button><button @click="login('admin')">admin</button>
  </div>
</template>

<script>
import * as types from '@/store/types'
export default {
  data () {
    return {
    }
  },
  methods: {
  	login(u) {
  		let payload = {name: 'qqq', role: u, token: 'ncbnv'}
  		this.$store.commit(types.USER, payload)
  		var path = this.$route.query.redirect ? this.$route.query.redirect : '/';//登陸後判斷是否有之前要訪問的頁面
  		this.$router.replace(path)
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

main.js中：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router,
  store,
  components: { App },
  template: '<App/>'
})

router.beforeEach((to, from, next) => {
  // var user = localStorage.user ? JSON.parse(localStorage.user) : '';
  var user = store.state.user;
  if (user && user.token) { // 判斷是否有token
    if (to.meta.roles && to.meta.roles.indexOf(user.role) === -1) {//頁面有權限要求但用戶不符合
    	alert('403')
    	if(from.path == '/login'){
    		next('/')
    	}else{
    		next({path: from.path})
    	}
    } else {//頁面沒有權限要求就直接訪問
    	next()
    }
  } else if(to.path != '/login'){//沒有token的話讓跳轉到登錄頁，並傳遞當前準備訪問的路由
      next({path:'/login', query: {redirect: to.fullPath}})
  } else{
  	next()
  }
})