(四)前端路由與登錄攔截器——vue+springBoot實戰

#hash模式和history模式(深入瞭解)

 

#登錄攔截

方式之一:後端攔截,這種方法需要將前端打包,部署到後端

 

#攔截器的簡單邏輯

1)用戶訪問URL

2)檢測該URL是否爲登錄界面

3)是則不攔截,不是則檢測是否爲登錄狀態

4)登錄狀態不攔截,未登錄則跳轉到登錄界面

 

#前端攔截

Vuex:它是專門爲 Vue 開發的狀態管理方案,我們可以把需要在各個組件中傳遞使用的變量、方法定義在這裏

引入vuex:

1)cnpm install vuex --save

2)創建/src/store/index.js 不理解

3)修改路由配置

在需要攔截的路由下添加一條元數據

4)使用鉤子函數判斷是否攔截

鉤子函數:在某些時刻會被調用函數

src/main.js 添加對store的引用

修改vue對象,添加store

添加beforeeach()鉤子函數

修改login.vue

 

攔截設計總體流程:

使用vuex保存登錄界面的用戶狀態——》修改路由配置,使登錄頁面的路由可進行攔截——》添加鉤子函數,進行攔截處理

 

#同時運行前後端項目,訪問 http://localhost:8080/index ,發現頁面直接跳轉到了 http://localhost:8080/login?redirect=%2Findex

 

Q:可以直接訪問 http://localhost:8080/index

 

A:換一個瀏覽器才能實現攔截效果

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章