使用vuex和router实现权限拦截

因为要实现一个管理系统，所以主页面必须要在登陆的情况下使用，传统的web都是在后台做验证的，但是现在使用的是vue，所以干脆使用vue做了权限校验，

router中有导航守卫的概念，其中的全局前置守卫是一个很好的验证方法，官网的导航守卫概念，我做了一个简单的demo

在main.js中添加

router.beforeEach((to, from, next) => {
  debugger
  if (to.path !== '/login') {
    if (store.state.token === '') {//我是将token存在了sessionStorage中，你可以将这里简单的修改
      next({
        path: '/login'
      })
    } else {
      next()//这一步必须有，必须让函数resolve，不然路由不能跳转
    }
  } else {
    next()
  }
})

如果想使用sessionStorage来验证token，那么就需要在store.js文件中添加

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
let defaultToken = ''
try {
  defaultToken = sessionStorage.getItem('token')
} catch (error) {}

export default new Vuex.Store({
  state: {
    token: defaultToken,
    userName: 'root',
    passWord: '12345'
  },
  mutations: {
    SET_TOKEN (state, token) {
      sessionStorage.setItem('token', token)
      state.token = token
    },
    REMOVE_TOKEN (state) {
      sessionStorage.removeItem('token')
    }
  },
  actions: {

  }
})

配置好后，就可以去执行程序了，当你访问其他页面的时候，如果token没有值，他会默认跳转到login页面