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內容數
比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。
而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
在串接第三方 API時，需要定期刷新 token，那有沒有辦法針對 request 和 response 做配置，在 token 過期時先做刷新、再做請求呢？本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
為什麼要登出使用者？
安全性：防止未經授權的人，在使用者暫離時使用系統，這在公用或共享電腦的環境中尤其重要。
資料保護：只要使用者處於登入狀態，就會暴露在個人資料被他人操縱或利用的風險中，因此登出閒置使用者對資安也很重要。
如何在 Vue 3 專案中實作此功能？
當您在vCenter上發現Root使用者密碼過期的訊息時，該如何解決呢？本文將介紹如何透過SSH進入系統並立即變更密碼，以及如何將密碼設定成永不過期，避免再次遇到此問題。
前言
這篇文章分享cookie、sessionStorage、localStorage、session的差異，因為前後端溝通常用的就這幾個，我比較常用的是cookie或session，但也是有可能會用到sessionStorage或localStorage的時候，因此想說這邊做個紀錄比較他們的差別
本文介紹了 Django 專案中各個檔案的用途，包括 settings.py、tests.py、models.py 等。並且解釋了 MTV 架構的後端運作流程，以及相對應的範例介紹。閱讀本文可幫助讀者更好地瞭解 Django 後端開發。
授權碼模式連線流程
用戶端請求自己的伺服器。
伺服器發現用戶沒登入，就導向認證伺服器。
認證伺服器顯示授權頁面，等待用戶授權。
用戶確認授權後，授權頁面會向認證伺服器請求授權碼。
用戶獲取授權碼。
用戶將授權碼傳給伺服器。
伺服器拿授權碼向認證伺服器取得token。
應用註冊
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
在串接第三方 API時，需要定期刷新 token，那有沒有辦法針對 request 和 response 做配置，在 token 過期時先做刷新、再做請求呢？本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
為什麼要登出使用者？
安全性：防止未經授權的人，在使用者暫離時使用系統，這在公用或共享電腦的環境中尤其重要。
資料保護：只要使用者處於登入狀態，就會暴露在個人資料被他人操縱或利用的風險中，因此登出閒置使用者對資安也很重要。
如何在 Vue 3 專案中實作此功能？
當您在vCenter上發現Root使用者密碼過期的訊息時，該如何解決呢？本文將介紹如何透過SSH進入系統並立即變更密碼，以及如何將密碼設定成永不過期，避免再次遇到此問題。
前言
這篇文章分享cookie、sessionStorage、localStorage、session的差異，因為前後端溝通常用的就這幾個，我比較常用的是cookie或session，但也是有可能會用到sessionStorage或localStorage的時候，因此想說這邊做個紀錄比較他們的差別
本文介紹了 Django 專案中各個檔案的用途，包括 settings.py、tests.py、models.py 等。並且解釋了 MTV 架構的後端運作流程，以及相對應的範例介紹。閱讀本文可幫助讀者更好地瞭解 Django 後端開發。
授權碼模式連線流程
用戶端請求自己的伺服器。
伺服器發現用戶沒登入，就導向認證伺服器。
認證伺服器顯示授權頁面，等待用戶授權。
用戶確認授權後，授權頁面會向認證伺服器請求授權碼。
用戶獲取授權碼。
用戶將授權碼傳給伺服器。
伺服器拿授權碼向認證伺服器取得token。
應用註冊