兩種方法實現登入返回上一頁,對上一頁進行判斷,如果不是本網站頁面,就跳轉到個人中心或網站主頁,如果上一頁是本網站頁面就跳轉回到上一頁

問題/需求:

登入後返回到上一次的存取頁面
如果上個頁面是其他網站,返回個人中心(自己定)

解決方案一:

思路: 響應攔截器配合本地儲存,先將網站的域名或基地址存到本地,登入成功後從本地取出該值進行判斷,匹配則返回上一頁,否則跳轉到個人中心或網站主頁(自己定)

程式碼實現:

響應攔截器: localStorage.setItem("baseURL", "http://127.0.0.1:8080")

// 新增響應攔截器
axios.interceptors.response.use(function (response) {
  // 對響應資料做點什麼
  if (response.data.message === '使用者資訊驗證失敗') {
    // this.$router.push({name:'Login'})
    localStorage.setItem("baseURL", "http://127.0.0.1:8080")
    window.location.href = '#/login'
  }
  return response;
}, function (error) {
  // 對響應錯誤做點什麼
  return Promise.reject(error);
})

登入頁:

const baseURL = localStorage.getItem("baseURL");
if (baseURL === "http://127.0.0.1:8080") {
  // 匹配基地址成功,移除本地儲存的基地址, 跳轉到上一頁
  localStorage.removeItem("baseURL");
  this.$router.go(-1);
} else {
  // 匹配失敗,跳轉到 個人中心頁
  this.$router.push({ path: `personal/${res.data.data.user.id}` });
}

補充: 解決使用者從本網站跳轉到登陸頁,卻不登入,下次又重其他網站直接導航欄輸入地址跳轉時的bug.
beforeunload: 視窗關閉或者重新重新整理都會觸發這個事件

mounted() {
    window.addEventListener("beforeunload", () =>
      localStorage.removeItem("baseURL")
    );
  },

解決方案二:

思路:使用 beforeRouteEnter 導航守衛,將 from:導航正要離開的路由的引數,通過next((vm) => (vm.fromRouteName = from.name)) 將一個值掛載到元件範例fromRouteName屬性上,登入成功跳轉前判斷 fromRouteName 的值是否存在, 1.存在:即說明上一個頁面是本網站的頁面,可以返回上一頁. 2.不存在:說明上一個不是本網站的頁面,要跳轉到個人中心或網站主頁

程式碼實現:

1.注意點:beforeRouteEnter是跟el,data同級的,其餘引數說明看註釋,程式碼就一句

beforeRouteEnter(to, from, next) {
    console.log("to", to);  // 即將要進入的目標 路由物件
    console.log("from", from); // 當前導航正要離開的路由
    console.log("next", next);  // next: Function,next不同用法不同效果,
    // 1.next()進行管道中的下個勾點
    // 2.next(false)中斷當前導
    // 3.next('/') 或者 next({ path: '/' })中斷本次導航,調到定義的其他導航
    // 4.next(error)導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回撥
    
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件範例 `this`
    // 因為當守衛執行前，元件範例還沒被建立
    // 
    next((vm) => (vm.fromRouteName = from.name));
  },

在data中定義 fromRouteName

data() {
    return {
      fromRouteName: null,
    };
  },

在登入請求成功後,跳轉前判斷

if (this.fromRouteName) {
// 存在該資料,說明上一頁是本網站頁面,執行返回到上一頁
   this.$router.back(); 
} else {
// 不存在該資料, 說明上一頁不是本網站,執行跳轉到個人中心或主頁
  this.$router.push({ path: `personal/${res.data.data.user.id}` });
}