Json web token authentication with django&vue—part 2: vue
閱讀時間約 3 分鐘
State management
首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts
Login
接下來我們來寫一下登入頁面在 src/components/login.vue ，以下是 script 的部分，主要就是去 post /api/token ，驗證過的話就把 token 存在 localStorage，然後進入首頁，存 token 的方法剛剛寫在 stage management 了，這裡就引入方法並使用
所有頁面每隔一段時間自動刷新 token
這邊我們使用巢狀路由來做到每隔一段時間自動刷新 token 的功能，我們做一個 src/components/mainLayout.vue 當作父頁面，在父頁面這邊做到刷新 token 的功能，其他需要做到這個功能的頁面，都掛在這個頁面之下當作子頁面。
在上一篇中，我們設定 access token 失效時間為五分鐘，所以前台這邊我們設定每四分鐘刷新一次 token，這樣使用者只要瀏覽器開著，就可以保持登入狀態了。
然後我們要用 jwt-decode 這個套件去解析 access token 中的 payload，在上一篇中，我們把 username 加到了 payload 中，現在我們用const user=jwt_decode<{'username':''}>(String(localStorage.getItem('authTokenAccess')))['username'] 獲得 username 資訊，這樣就可以使用這個資訊囉
Logout
一樣是在剛剛的 mainLayout.vue 裡，就是最後四行，把 token 從 localStorage 刪掉，再回到登入頁面就好了。
開啟頁面時重新獲得 token 並驗證
我們來到 vue 路由設定這邊，檔案位在 src/router/index.ts ，主要是要在 router.beforeEach 這邊做一個路由守護，進入任何頁面之前先去刷新 token 再進行驗證，
由於 access token 五分鐘就會失效，當使用者登入之後再關掉網頁，下次開頁面的時候肯定已經失效了，所以要先用 refresh token 去向後端要求新的一組 token，並存到 localStorage，驗證過了就進想去的頁面，否則就進到登入頁面
好了，最基本的驗證到這裡就講完了，一般應用，驗證做到這裡已經很好了。
不過有個問題，以上都是針對使用者用瀏覽器操作網頁，只會去擋使用者在前端的操作，那如果使用者或者駭客知道你的後端 api 呢？他直接 request 後端呢？直接繞過前台不就不用驗證了嗎？
下一篇我們會對這個問題提出解決辦法，透過前端攔截器，以及後端 api 要求有權限才能操作。
為什麼會看到廣告
9會員
49內容數
比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。
而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
解讀JSON 字串
首先，你需要使用 Python 的 json 模組來解讀JSON 字串。
JSON的基本結構：
由花括號 {} 包圍，內部是鍵值對的集合，每個鍵值對之間用逗號分隔。
鍵是字串類型，值可以是任何JSON支持的資料類型（字串、數字、布林值、陣列、物件或 null）。
{
解析成List
List items=json.decode(jsonStr);
print(items[0]["your_key"]);
解析成Map
Map<String, dynamic> user = json.decode(json);
print('${user['your_k
JSON(JavaScript Object Notation)是AJAX(參考：[PHP][AJAX]介紹)常用的資料交換格式。在PHP有提供函數，可以將資料轉換成JSON。除外JSON比XML快速且簡單。
語法
資料是由鍵和值(Key-value)組成。
鍵和值之間用「:」區隔。
資料之
最近因為想要花些時間做完一個完整的SideProject，以前總是懂得怎麼使用，拼拼湊湊完成一個塞趴卷就交卷了，但都沒時間去真正理解這些原理的應用，而Laravel 框架本身支持的登入登出的工具，就有好多種。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
解讀JSON 字串
首先，你需要使用 Python 的 json 模組來解讀JSON 字串。
JSON的基本結構：
由花括號 {} 包圍，內部是鍵值對的集合，每個鍵值對之間用逗號分隔。
鍵是字串類型，值可以是任何JSON支持的資料類型（字串、數字、布林值、陣列、物件或 null）。
{
解析成List
List items=json.decode(jsonStr);
print(items[0]["your_key"]);
解析成Map
Map<String, dynamic> user = json.decode(json);
print('${user['your_k
JSON(JavaScript Object Notation)是AJAX(參考：[PHP][AJAX]介紹)常用的資料交換格式。在PHP有提供函數，可以將資料轉換成JSON。除外JSON比XML快速且簡單。
語法
資料是由鍵和值(Key-value)組成。
鍵和值之間用「:」區隔。
資料之
最近因為想要花些時間做完一個完整的SideProject，以前總是懂得怎麼使用，拼拼湊湊完成一個塞趴卷就交卷了，但都沒時間去真正理解這些原理的應用，而Laravel 框架本身支持的登入登出的工具，就有好多種。