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 追蹤
一開始你先把你的專案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 後端開發。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
授權碼模式連線流程
用戶端請求自己的伺服器。
伺服器發現用戶沒登入，就導向認證伺服器。
認證伺服器顯示授權頁面，等待用戶授權。
用戶確認授權後，授權頁面會向認證伺服器請求授權碼。
用戶獲取授權碼。
用戶將授權碼傳給伺服器。
伺服器拿授權碼向認證伺服器取得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 後端開發。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
授權碼模式連線流程
用戶端請求自己的伺服器。
伺服器發現用戶沒登入，就導向認證伺服器。
認證伺服器顯示授權頁面，等待用戶授權。
用戶確認授權後，授權頁面會向認證伺服器請求授權碼。
用戶獲取授權碼。
用戶將授權碼傳給伺服器。
伺服器拿授權碼向認證伺服器取得token。
應用註冊