vue+axios實現(xiàn)登錄攔截的實例代碼
一個項目學會vue全家桶+axios實現(xiàn)登錄、攔截、登出功能,以及利用axios的http攔截器攔截請求和響應(yīng)。
前言
該項目是利用了Github 提供的personal token作為登錄token,通過token訪問你的Repository List。通過這個項目學習如何實現(xiàn)一個前端項目中所需要的 登錄及攔截、登出、token失效的攔截及對應(yīng) axios 攔截器的使用。
準備你需要先生成自己的 Github Personal Token( 生成Token )。 Token 生成后 訪問Demo,即可查看你的Repository List。
項目結(jié)構(gòu)
. ├── README.md ├── dist // 打包構(gòu)建后的文件夾 │ ├── build.js │ └── build.js.map ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ ├── css.css │ │ ├── icon.css │ │ └── logo.png │ ├── constant │ │ └── api.js // 配置api接口文件 │ ├── http.js // 封裝fetch、post請求及http 攔截器配置文件 │ ├── index.vue │ ├── login.vue │ ├── main.js │ ├── repository.vue │ ├── router.js // 路由配置文件 │ └── store │ ├── store.js │ └── types.js // vuex types └── webpack.config.js
技術(shù)棧
- Vue 2.0
- vue-router
- vuex
- axios
- vue-material
登錄攔截邏輯
第一步:路由攔截
首先在定義路由的時候就需要多添加一個自定義字段 requireAuth ,用于判斷該路由的訪問是否需要登錄。如果用戶已經(jīng)登錄,則順利進入路由, 否則就進入登錄頁面。
const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加該字段,表示進入這個路由是需要登錄的 }, component: Repository }, { path: '/login', name: 'login', component: Login } ];
定義完路由后,我們主要是利用 vue-router 提供的鉤子函數(shù) beforeEach() 對路由進行判斷。
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限 if (store.state.token) { // 通過vuex state獲取當前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù),登錄成功后跳轉(zhuǎn)到該路由 }) } } else { next(); } })
每個鉤子方法接收三個參數(shù):
- to: Route: 即將要進入的目標 路由對象
- from: Route: 當前導(dǎo)航正要離開的路由
- next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
- next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認的)。
- next(false): 中斷當前的導(dǎo)航。如果瀏覽器的 URL 改變了(可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應(yīng)的地址。
- next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當前的導(dǎo)航被中斷,然后進行一個新的導(dǎo)航。
確保要調(diào)用 next 方法,否則鉤子就不會被 resolved。
完整的方法見 /src/router.js
其中, to.meta 中是我們自定義的數(shù)據(jù),其中就包括我們剛剛定義的 requireAuth 字段。通過這個字段來判斷該路由是否需要登錄權(quán)限。需要的話,同時當前應(yīng)用不存在token,則跳轉(zhuǎn)到登錄頁面,進行登錄。登錄成功后跳轉(zhuǎn)到目標路由。
登錄攔截到這里就結(jié)束了嗎?并沒有。這種方式只是簡單的前端路由控制,并不能真正阻止用戶訪問需要登錄權(quán)限的路由。還有一種情況便是:當前token失效了,但是token依然保存在本地。這時候你去訪問需要登錄權(quán)限的路由時,實際上應(yīng)該讓用戶重新登錄。 這時候就需要結(jié)合 http 攔截器 + 后端接口返回的http 狀態(tài)碼來判斷。
第二步:攔截器
要想統(tǒng)一處理所有http請求和響應(yīng),就得用上 axios 的攔截器。通過配置 http response inteceptor ,當后端接口返回 401 Unauthorized(未授權(quán)) ,讓用戶重新登錄。
// http request 攔截器 axios.interceptors.request.use( config => { if (store.state.token) { // 判斷是否存在token,如果存在的話,則每個http header都加上token config.headers.Authorization = `token ${store.state.token}`; } return config; }, err => { return Promise.reject(err); }); // http response 攔截器 axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁面 store.commit(types.LOGOUT); router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) } } return Promise.reject(error.response.data) // 返回接口返回的錯誤信息 });
完整的方法見 /src/http.js .
通過上面這兩步,就可以在前端實現(xiàn)登錄攔截了。 登出 功能也就很簡單,只需要把當前token清除,再跳轉(zhuǎn)到首頁即可。
關(guān)于axios
對于axios,很多剛開始學習vue的人都覺得文檔比較難以看懂。我剛開始也是這么覺得的。但通過這么一個項目下來后,發(fā)現(xiàn)axios并不難理解。建議在學習axios的時帶著下面的目的去看文檔會更高效。因為掌握了下面這些內(nèi)容,基本上就可以無障礙得在項目中使用axios了。
- 發(fā)起http請求的方法
- http 請求成功時返回的數(shù)據(jù)及其類型
- http請求失敗的處理
- 攔截器的使用
- http的配置
運行及構(gòu)建
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue router導(dǎo)航守衛(wèi)(router.beforeEach())的使用詳解
導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這篇文章主要介紹了vue-router導(dǎo)航守衛(wèi)(router.beforeEach())的使用,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04解決Vue的項目使用Element ui 走馬燈無法實現(xiàn)的問題
這篇文章主要介紹了解決Vue的項目使用Element ui 走馬燈無法實現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue+axios?methods方法return取不到值問題及解決
這篇文章主要介紹了vue+axios?methods方法return取不到值問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10