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