beforeEach全局钩子管理用户访问权限！

 创建路由：

export default new Router({
  routes: [{
     path: '/',
     component: { template: '
公共页面
取admin1取boos1
' }
   },
   {
     path: '/login',
     name: 'HelloWorld',
     component: HelloWorld
   },
   {
     path: '/admin1',
     meta: {
       roles: ['admin'] //该页面可访问的权限
     },
     component: { template: '
admin页面1
' }
   },
   {
     path: '/boos1',
     meta: {
       roles: ['boos'] //该页面可访问的权限
     },
     component: { template: '
boos页面1
' },
   },
   { path: '*', component: { template: '
404未找到
' } }
 ]
})

模拟登录并保存用户信息到storage和store中：

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: ''
})

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()
  }
})