vue實現登錄后跳轉到之前的頁面

在開發中我們經常遇到這樣的需求，需要用戶直接點擊一個鏈接進入到一個頁面，用戶點擊后鏈接后會觸發401攔截返回登錄界面，登錄后又跳轉到鏈接的頁面而不是首頁，這種問題該如何去做呢？

先說一下我們需要用到的幾個API：

1.router.currentRoute:當前的路由信息對象，我們可以通過router.currentRoute.fullPath獲得解析后的 URL，包含查詢參數和 hash 的完整路徑，如果要訪問的頁面的路由有命名（name）的話，可以通過router.currentRoute.name獲得當前路由的名稱。

2.router.replace：作用和router.push相同，不過它不會向history添加新紀錄，而是替換當前的history記錄。

 

由於大家的代碼寫的都不一樣，我就不放我具體的實現代碼，簡單介紹一下思路：

1.用戶點開鏈接后，跳轉到的目標的路由頁面，然后觸發401攔截器，返回登錄頁面：

//401攔截
if（status == "401"）{
    router.push("/login")      
}

2.我們可以在401攔截的時候將目標鏈接保存在url中：

if (status == 401) {
      //判斷當前的路由是否是目標路由
      if(router.currentRoute.name == "target"){
        //跳轉回login路由，並把目標路由的url路徑保存在login的query中
        router.replace({
          name:"login",
          query: {redirect: router.currentRoute.fullPath}
        })
      }else{
        /* 普通401攔截直接返回到登錄頁面 */
        router.push('/login');
      }
    }

3.點擊登錄后使用url上保存的query直接跳轉回目標頁面

router.push({path:decodeURIComponent(url)});