付費限定

[18] Json web token authentication --part3: Vue

張哲嘉-avatar-img
張哲嘉
發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
更新於 發佈於 閱讀時間約 1 分鐘

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

以行動支持創作者！付費即可解鎖
本篇內容共 1258 字、0 則留言，僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。
張哲嘉的沙龍Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
留言
avatar-img
留言分享你的想法！
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2022/10/10
[30] TLS/SSL for MongoDB
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
[30] TLS/SSL for MongoDB
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
[29] 讓網站更安全，不准直接連我的網站 IP
Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
[29] 讓網站更安全，不准直接連我的網站 IP
Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
2022/10/10
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
Thumbnail
avatar-avatar
科技巨頭解碼
NVDA 25Q1 財報 - 扣除中國因素，輝達的前方仍然沒有烏雲 | #276
全球科技產業的焦點，AKA 全村的希望 NVIDIA，於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1，實際日曆期間為今年二到四月)，交出了打敗了市場預期的成績單。然而，在銷售持續高速成長的同時，川普政府加大對於中國的晶片管制......
#NVDA#NVIDIA#輝達
Thumbnail
avatar-avatar
科技巨頭解碼
NVDA 25Q1 財報 - 扣除中國因素，輝達的前方仍然沒有烏雲 | #276
全球科技產業的焦點，AKA 全村的希望 NVIDIA，於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1，實際日曆期間為今年二到四月)，交出了打敗了市場預期的成績單。然而，在銷售持續高速成長的同時，川普政府加大對於中國的晶片管制......
#NVDA#NVIDIA#輝達
Thumbnail
avatar-avatar
廖偉帆的沙龍
用 axios interceptor 實作 refresh token
在串接第三方 API時，需要定期刷新 token，那有沒有辦法針對 request 和 response 做配置，在 token 過期時先做刷新、再做請求呢？本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
#RESTfulAPI#前端#網頁開發
Thumbnail
avatar-avatar
廖偉帆的沙龍
用 axios interceptor 實作 refresh token
在串接第三方 API時，需要定期刷新 token，那有沒有辦法針對 request 和 response 做配置，在 token 過期時先做刷新、再做請求呢？本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
#RESTfulAPI#前端#網頁開發
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | Vue router 篇
Vue3 學習筆記，vue-router 篇。
#WebDev#Vue#vueRouter
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | Vue router 篇
Vue3 學習筆記，vue-router 篇。
#WebDev#Vue#vueRouter
Thumbnail
avatar-avatar
張哲嘉的沙龍
[18] Json web token authentication --part3: Vue
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts Login 接下來我們來寫一下登入頁面在 src/components/login.vue ，以下是 sc
Thumbnail
avatar-avatar
張哲嘉的沙龍
[18] Json web token authentication --part3: Vue
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts Login 接下來我們來寫一下登入頁面在 src/components/login.vue ，以下是 sc
Thumbnail
avatar-avatar
張哲嘉的沙龍
[17] Json web token authentication --part2: Django
django 這邊需要使用 Django REST framework (drf) 及 drf 官方推薦實作 JWT 的 Django-rest-framework-simplejwt 這兩個套件。 settings.py 再來設定 django 的 back_end/settings.py 引入，
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[17] Json web token authentication --part2: Django
django 這邊需要使用 Django REST framework (drf) 及 drf 官方推薦實作 JWT 的 Django-rest-framework-simplejwt 這兩個套件。 settings.py 再來設定 django 的 back_end/settings.py 引入，
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[9] State management
狀態管理有點像是 cookie 或 localStorage，可是又多了更多操作可以用，讓你再切換頁面時可以使用相同的變數。 用來使用這個功能的套件叫做 vuex 以下不是狀態管理全部的功能，但是最常在用的其實就是這些 state 首先先來定義一個可以在各個網頁頁面取用的變數吧 所有的狀態管理設定
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[9] State management
狀態管理有點像是 cookie 或 localStorage，可是又多了更多操作可以用，讓你再切換頁面時可以使用相同的變數。 用來使用這個功能的套件叫做 vuex 以下不是狀態管理全部的功能，但是最常在用的其實就是這些 state 首先先來定義一個可以在各個網頁頁面取用的變數吧 所有的狀態管理設定
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[8] Vue Router
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像，用法是像
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[8] Vue Router
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像，用法是像
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[7] Vue: Life cycle
今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖 是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
#網頁
Thumbnail
avatar-avatar
張哲嘉的沙龍
[7] Vue: Life cycle
今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖 是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
#網頁
Thumbnail
avatar-avatar
張哲嘉的沙龍
[3] Vue 專案架構
專案建好了，那先來講 Vue 的專案架構 詳細內容很多，所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[3] Vue 專案架構
專案建好了，那先來講 Vue 的專案架構 詳細內容很多，所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
#網頁開發
Thumbnail
avatar-avatar
吳佳鑫的沙龍
CRUD x Vue.js x PHP x MYSQL PDO
S1.建立資料庫 user S2.建立 index.htm a.載入 vue.js、jquery、bootstrap b.版面建立 S3.vue.js程式 新增、查看列表、互動視窗、修改、刪除 index.htm VueControl.js 原碼:https://reurl.cc/e3k8yL
#vuejs#php#pdo
Thumbnail
avatar-avatar
吳佳鑫的沙龍
CRUD x Vue.js x PHP x MYSQL PDO
S1.建立資料庫 user S2.建立 index.htm a.載入 vue.js、jquery、bootstrap b.版面建立 S3.vue.js程式 新增、查看列表、互動視窗、修改、刪除 index.htm VueControl.js 原碼:https://reurl.cc/e3k8yL
#vuejs#php#pdo
Thumbnail
avatar-avatar
Vic Lin的沙龍
Vue.js 入門
Vue.js 入門
#Vuejs#JavaScript
Thumbnail
avatar-avatar
Vic Lin的沙龍
Vue.js 入門
Vue.js 入門
#Vuejs#JavaScript
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News