vue【路由导航守卫控制访问主页前先登录】

• 在login.vue中的methods中login()方法中，如果登录成功，将token 保存到客户端的sessionStoarge中，因为该token只在当前网页打开期间有效，所以将token存储在sessionStoarge中。

  //发送post请求
  const {data:res} = await this.$http.post("login",this.loginForm);
  //将token保存到sessionStorage
  window.sessionStorage.setItem("token",res.data.token);

   

• 如果sessionStoarge不为空，则跳转到主页，假设路由地址为/index。

  this.$router.push('/index');//登录成功，进入主页

•  在router/index.js中配置路由导航

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Login from '@/components/Login.vue'
  import Index from '@/components/index.vue'
  
  Vue.use(VueRouter)
  
  const routes = [
  	{path:'/',redirect:'/login'},
  	{path:'/login',component:Login},
  	{path:'/index',component:Index}
  ]
  
  const router = new VueRouter({
    routes
  })
  
  //挂载路由导航守卫
  //如果没有登录，就跳转到登陆页面
  router.beforeEach((to,from,next)=>{
  	//to将要访问的页面
  	//from从哪个路径跳转而来
  	//next是一个函数，表示放行
  	//next() 放行  next('/login')强制跳转
  	if (to.path==='/login'){
  		return next();
  	}
  	//获取token
  	const tokenStr = window.sessionStorage.getItem('token');
  	if(!tokenStr){
  		return next('/login');
  	}else{
  		next();
  	}
  })
  
  
  export default router