Json web token authentication with django & vue — part 3: interceptor & api authentication

更新於 發佈於 閱讀時間約 3 分鐘

前言

只要把後端對外,或者網站對外,就一定會被攻擊,有自己用自己的電腦當 server 架站過就一定知道,只要一對外,每天都會收到一些隨機的攻擊,最常見就是別人在亂試 api 看能不能猜對,通常是猜不到啦,鬼知道你的 api 長什麼樣子,更別提要帶什麼參數,能猜對真的是會通靈。

儘管如此,你可能還是不知道在哪洩露了你的 api,有可能不小心推到 github 公開,或者被勒索檔案之類的。所以我們還是要幫 api 上一道鎖比較安全。

作法就是前台這邊發 request 一定要加入 access token 作為驗證依據,後台這邊一定要要求 request 中的 access token 合法才能使用 api。那以下就開始實做吧!

Interceptor

Interceptor 是讓你在前台發出 request 或接收到 response 之前可以先要求做什麼事再進行接下來的 request 或 response。

create instance module

首先我們先在前台 src/ 內創建 utils/useAxios.js ,這邊是把 useAxios.js 做成一個 module,裡面會做一個 instance,要求使用攔截器 (interceptor)。

dayjs 這個套件是等一下用來判斷 access token 是否失效,我們用 axios.create 創建一個 instanse,要求 headers 內 Authorization 為 Bearer 加上我們之前存在 localStorage 的 access token。

再來是攔截器,用 axiosInstance.interceptors.request.use, 要求使用攔截器, const payload=jwt_decode(String(localStorage.getItem('authTokenAccess'))) 解析 access token payload,用 const isExpired = dayjs.unix(payload.exp).diff(dayjs()) < 1; 判斷 access token 是否失效,如果失效就重新去拿 token 並存到 localStorage。

use your customize instance

在我們想用攔截器的頁面引入剛剛做的 instance module

raw-image

以下是範例,記得用 asyncawait 做同步處理

raw-image

API authentication

再來是後端 API 的部分。很簡單,先在 views.py 上方加入

from rest_framework.decorators import api_view, permission_classes from rest_framework.permissions import IsAuthenticated

然後在想要做驗證的 funtion 前面加上

@api_view([‘GET’]) 
@permission_classes([IsAuthenticated])

像這樣

raw-image

ok,到這邊 api 驗證就完成了,就算別人知道你的 api,也用不了了!

留言
avatar-img
留言分享你的想法!
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2023/01/09
最近想把我的 Switch OLED 帶出門,在挑什麼 Switch 攜帶包比較好,看很多人都推薦 tomtoc,感覺評價挺不錯的,最後決定入手 tomtoc 的玩家首選旅行包 以 Switch OLED 來說有三種選擇...... https://zjzhang.org/post/nintendo
2023/01/09
最近想把我的 Switch OLED 帶出門,在挑什麼 Switch 攜帶包比較好,看很多人都推薦 tomtoc,感覺評價挺不錯的,最後決定入手 tomtoc 的玩家首選旅行包 以 Switch OLED 來說有三種選擇...... https://zjzhang.org/post/nintendo
2022/12/14
Cache categories There are two kinds of cache, one is the read-only cache, and the other one is the read-and-write cache.
2022/12/14
Cache categories There are two kinds of cache, one is the read-only cache, and the other one is the read-and-write cache.
2022/10/13
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力
2022/10/13
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
在串接第三方 API時,需要定期刷新 token,那有沒有辦法針對 request 和 response 做配置,在 token 過期時先做刷新、再做請求呢?本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
Thumbnail
在串接第三方 API時,需要定期刷新 token,那有沒有辦法針對 request 和 response 做配置,在 token 過期時先做刷新、再做請求呢?本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
Service Worker 是用於客戶端的攔截器,可以使用 Cache Storage 和 IndexDB,並有自己的生命週期。Web Worker 用於處理可能會使用到大量運算且不希望影響到使用者體驗的任務。Shared Worker 可以在相同 Domain 的不同頁面上共享訊息。
Thumbnail
Service Worker 是用於客戶端的攔截器,可以使用 Cache Storage 和 IndexDB,並有自己的生命週期。Web Worker 用於處理可能會使用到大量運算且不希望影響到使用者體驗的任務。Shared Worker 可以在相同 Domain 的不同頁面上共享訊息。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News