需求: 如果不登入就不能隨便操作路由
比如說 http://192.168.0.100 開啟登陸頁面
輸入http://192.168.0.100 /#/home 跳轉到home頁面
所以必須控制路由,才能完成輸入登陸頁面成功跳轉到home頁面,而不是直接寫一個home頁面的連結就跳過來了
配置基本步驟:
1.需要在登陸頁面配置
當登陸成功後

if(res.data.success) {
	sessionStorage.setItem('username',res.data.username) //需要後端返回 等同token
	this.$router.push('/home' ) // 跳轉
}

2.需要在路由的indes.js配置
程式碼如下:

// 設定路由的前置守衛（路由跳轉之前）
router.beforeEach((to, from, next) => {
   if (to.name == 'Login') {
    next();
   } else {
     // 判斷sesstion裡有沒有username
     const username = sessionStorage.getItem('username');
     if (username) {
      next();
   } else {
      next({path: '/'})
     }
  }
})

3.配置退出按鈕

sessionStorage.clear(); // 刪除sesstion資料
this.$router.push({ path: "/" }); //跳轉到登陸頁面

在這裡需要說明 sesstionStorage的生命週期,當關閉網頁就消失了,
此處用的是username 如果是token 需要再axios的攔截器中新增這一行程式碼,其他等同

// 在axios攔截器中新增 一般token是隨著請求頭
 if (config.url !== '/') {
   const token = sessionStorage.getItem('token');
    //  設定請求頭
   config.headers.Authorization = token;
   }
 

還有的是利用vuex登陸的這個慢慢研究