路由守卫beforeEach

1.关于vueX命名空间的问题

在store文件夹下建立如图所示文件结构：

其中app.js文件中的代码如下

/ 储存
const state = {
    token:null
}

// 同步
const mutations = {
    SET_TOKEN: (state,token) =>{
        state.token = token
    }
}

// 异步修改
const actions = {
    setToken:({commit},token)=>{
        commit('SET_TOKEN',token)
    }
}

export default {
    namespaced: true,//外部获取属性时添加模块名（文件名）  例：store.state.app.token
    state,
    mutations,
    actions
  }

想在其他组件中调用app.js中的setToken方法：

this.$store.dispatch('app/setToken')//注意：方法名setToken之前一定要加模块名app

2.路由守卫beforeEach

路由守卫：路由跳转之前执行的操作，只要路由发生改变，都会执行beforeEach。

在main.js文件中建立路由守卫，也可以在router文件夹下新建一个js文件，如：premit.js，但要记得在main.js中引入该文件：import “./router/premit”，路由守卫代码如下所示：

import router from './index';
import {getToken} from '@/store.js';
const whiteRouter =['/login'];
router.beforeEach((to,from,next)=>{
	if(getToken()){
		next();//允许跳转
	}else{
		if(whiteRouter.indexOf(to.path) !==-1){//indexOf方法，判断数据中是否存在指定的某个对象，如果不存在，则返回-1
			next();					   //要跳转的路由是login,则执行next()
		}else{
			next('/login')
		}
	}
//to即将跳转的路由，
//from上一个路由
//next的写法有三种：next()：直接执行to里面的钩子函数;  next(false):中断当前导航；next({path:'/'})：跳转到指定路由，该写法会造成死循环，路由只能跳转到指定的路由
})