Vue 如何實作登入後，跳轉到登入之前要通路的頁面

一、需求

有些時候，需要實作這樣的功能：

1. 項目中的有些頁面是可以直接通路的，不需要登入。
2. 但這個頁面中的一些連結一些路徑則需要登入後才能檢視，也就是說點選這些連結的時候就直接跳轉到登入頁面了
3. 在登入之後，需要重新定位到之前要通路的路徑上去，而不是跳轉到登入後的預設路徑中

舉個例子說：

1. login 成功後會自動跳轉到​

   ​/index​

   ​ 頁面
2. 在​

   ​/index​

   ​​ 頁面中有一個​

   ​/user/info​

   ​ 的快捷路徑
3. 未登入之前點選​

   ​/user/info​

   ​​ 這個路徑，會直接跳轉至​

   ​/login​

   ​ 頁面
4. 此時需要實作這樣的功能，在登入之後，再回到之前要通路的​

   ​/user/info​

   ​ 路徑上去

二、實作思路

那麼如何實作這個需求呢。

用 store 來實作

1. 在​

   ​store.state​

   ​​ 中建立一個變量​

   ​lastVisitPath​

   ​ 記錄進入登入頁面之前要去的 path
2. 登入成功之後，判斷​

   ​lastVisitPath​

   ​ 這個變量是否有值，如果有，就跳到這個路徑上去，并清空這個變量值

三、實作

// 引入 state 和 mutation
computed: {
    ...mapState(['lastVisitRoute'])
},
methods: {
    ...mapMutations(['SET_LAST_VISIT_ROUTE']),
}

// 
if (token) {

} else {
    store.commit('SET_LAST_VISIT_ROUTE', to.path)
    next({path: '/login'})
}      

// 引入 state 和 mutation
computed: {
    ...mapState(['lastVisitRoute'])
},
methods: {
    ...mapMutations(['SET_LAST_VISIT_ROUTE']),
}

// 
if (this.lastVisitRoute){
    this.$router.push({path: this.lastVisitRoute})
        .then(res => {
            // 跳轉成功後，清除這個 lastVisitRoute 變量值
            this.SET_LAST_VISIT_ROUTE(null)
        })
        .catch(error => {
            console.log(error)
        });
} else {
    this.$router.push({path: '/'}).catch(error => {
        console.log(error)
    })
}