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 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
解讀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 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
解讀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 框架本身支持的登入登出的工具，就有好多種。