2020-10-27

关于Vue的路由导航守卫的基本用法：
条件：1.在登录页面提交后后台会返回token值，我们需要在axios的请求拦截器中利用window.sessionStorage.getItem(‘token’)存储token值（sessionStorage的存活周期只在网页打开时有效，网页关闭自动取消存储）
2.这个例子是依据token来判断路由守卫

代码：

	//在router下的index.js中
	//导入vue和vue-router
	import Vue from 'vue'
	import Router from 'vue-router'
	// 创建路由实例对象
	const router=new Router({
     
	//路由规则
	routes:[
			{
     path:'/login',component:Login}
			//......其余组件规则省略
			]
							})
	//此时定义路由导航守卫
	//router.beforeEach的router代表上面定义的路由实例
	router.beforeEach((to,from,next)=>{
     
		//to代表要去的路径
		//from代表从哪来的路径(用的不太多)
		//next代表放行   next()也是个方法，例如next('/login')强制到login页面
	
	if(to.path==='/login') return next()   //如果去的地方是login直接放行
	//此时获取一下刚开始存储token值
	const tokenStr=window.sessionStorage.getItem('token)
	if(!tokenStr) return next('/login)  // 如果没有token值强制跳转到login页面
	next()  //有token值，直接放行
})