Vue實現未登錄跳轉到登錄頁的示例代碼

Posted on by

1、登錄頁登錄成功時將服務端返回的標識存放起來

2、在router中給不需要登錄的頁面設置 meta : { auth : false }，如首頁

 3、使用路由前置守衛beforEach，由於給路由設置瞭meta : { auth : false }，如果是符合該屬性時則不需要跳轉登錄頁

 4、接下來根據token是否存入到localstorage來進行判斷或者cookie是否存入客戶端做判斷，這裡在vuex中做處理

如果token和cookie不存在時則需要跳轉到登錄頁

5、在axios中響應攔截response中做如下處理

先獲取服務端返回未登錄的狀態碼，根據這個狀態碼做判斷並將token,cookie置空後跳轉到登錄頁

總結：

1、 to.fullPath將跳轉的路由path作為參數，登錄成功後跳轉到該路由

2、vue router中meta 字段代表路由元信息，可以通過meta對象中的一些屬性來判斷當前路由是否需要進一步處理，如果需要處理，按照自己想要的效果進行處理即可（此處是不需要跳轉登錄頁）

3、路由前置守衛beforEach接受三個參數

（1）to: Route: 即將要進入的目標 

（2）from: Route: 當前導航正要離開的路由

（3）next

4、axios全局攔截器

（1）請求攔截器

axios.interceptors.request.use（res=>{
        //發送請求前要做的事兒，例如統一cookie、設置請求頭header等

        return res
}，(error)=>{
        //請求發生錯誤時在這裡處理
        return Promise.reject(error)

}）

（2）響應攔截器

axios.interceptors.response.use(res=>{
        //請求成功時對響應數據做處理，做數據統一處理，常處理登錄失敗與失效
        return res
 }，(error)=>{        

    //請求失敗時在這裡處理
        return Promise.reject(error)

 })

到此這篇關於Vue實現未登錄跳轉到登錄頁的示例代碼的文章就介紹到這瞭,更多相關Vue 未登錄跳轉到登錄頁內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：