State management
首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts
Login
接下來我們來寫一下登入頁面在 src/components/login.vue ，以下是 sc

學習

職場產業

投資理財

State management

Login

所有頁面每隔一段時間自動刷新 token

Logout

<h2 class="draft-block draft--h2" name="header-btp6t">State management</h2>
<div class="draft-block draft--p left">首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 <span style="font-weight: bold; ">src/store/index.ts</span></div>
<div class="embed-block-prerender" data-type="gist" data-id="dc67e4be1f7804d3ee4dd66d510f0491"></div>
<h2 class="draft-block draft--h2" name="header-friu1">Login</h2>
<div class="draft-block draft--p left">接下來我們來寫一下登入頁面在 <span style="font-weight: bold; ">src/components/login.vue</span> ，以下是 script 的部分，主要就是去 post <span style="font-weight: bold; ">/api/token</span> ，驗證過的話就把 token 存在 <span style="font-weight: bold; ">localStorage</span>，然後進入首頁，存 token 的方法剛剛寫在 stage management 了，這裡就引入方法並使用</div>
<div class="embed-block-prerender" data-type="gist" data-id="dc0834505e9b13e00758f6ec5a197b64"></div>
<h2 class="draft-block draft--h2" name="header-fq78">所有頁面每隔一段時間自動刷新 token</h2>

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

[19] JWT --part4: interceptor & api authentication

首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts

接下來我們來寫一下登入頁面在 src/components/login.vue ，以下是 script 的部分，主要就是去 post /api/token ，驗證過的話就把 token 存在 localStorage，然後進入首頁，存 token 的方法剛剛寫在 stage management 了，這裡就引入方法並使用

django 這邊需要使用 Django REST framework (drf) 及 drf 官方推薦實作 JWT 的 Django-rest-framework-simplejwt 這兩個套件。
settings.py
再來設定 django 的 back_end/settings.py 引入，

付費限定文章
[18] Json web token authentication --part3: Vue

State management

Login

所有頁面每隔一段時間自動刷新 token

以行動支持創作者！付費即可解鎖

付費限定文章[18] Json web token authentication --part3: Vue

State management

Login

所有頁面每隔一段時間自動刷新 token

以行動支持創作者！付費即可解鎖

付費限定文章
[18] Json web token authentication --part3: Vue