付費限定

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

發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你

2024/10/09 更新2022/10/09 發佈閱讀 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 從網頁全端開發到架站一次教給你

留言

張哲嘉的沙龍

9會員

49內容數

比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。

張哲嘉的沙龍的其他內容

2022/10/10

[30] TLS/SSL for MongoDB

Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了然後

2022/10/10

[30] TLS/SSL for MongoDB

2022/10/10

[29] 讓網站更安全，不准直接連我的網站 IP

Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot

2022/10/10

[29] 讓網站更安全，不准直接連我的網站 IP

2022/10/10

[28] 用 Nginx 部署 production back-end server

保護後端重要資訊在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個

2022/10/10

[28] 用 Nginx 部署 production back-end server

看更多

你可能也想看

廖偉帆的沙龍

用 axios interceptor 實作 refresh token

在串接第三方 API時，需要定期刷新 token，那有沒有辦法針對 request 和 response 做配置，在 token 過期時先做刷新、再做請求呢？本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。

#RESTfulAPI#前端#網頁開發

2024/05/13

廖偉帆的沙龍

用 axios interceptor 實作 refresh token

#RESTfulAPI#前端#網頁開發

2024/05/13

Jeremy Ho的沙龍

Vue3 筆記 | Vue router 篇

Vue3 學習筆記，vue-router 篇。

#WebDev#Vue#vueRouter

2023/11/12

Jeremy Ho的沙龍

Vue3 筆記 | Vue router 篇

Vue3 學習筆記，vue-router 篇。

#WebDev#Vue#vueRouter

2023/11/12

黃郁書的沙龍

《海妲．蓋柏樂》：女性困境與「永恆少年」的毀滅衝動

5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》，由臺灣劇團「晃晃跨幅町」製作，本文將以從舞台符號、聲音與表演調度切入，討論海妲・蓋柏樂在父權社會結構下的困境，並結合榮格心理學與馮．法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析，理解女人何以走向精神性的操控、毀滅與死亡。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/02/05

黃郁書的沙龍

《海妲．蓋柏樂》：女性困境與「永恆少年」的毀滅衝動

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/02/05

陳沅綦的沙龍

柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向

本文分析導演巴里・柯斯基（Barrie Kosky）如何運用極簡的舞臺配置，將布萊希特（Bertolt Brecht）的「疏離效果」轉化為視覺奇觀與黑色幽默，探討《三便士歌劇》在當代劇場中的新詮釋，並藉由舞臺、燈光、服裝、音樂等多方面，分析該作如何在保留批判核心的同時，觸及觀眾的觀看位置與人性幽微。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/02/11

陳沅綦的沙龍

柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/02/11

張哲嘉的沙龍

[7] Vue: Life cycle

今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖在加上 setup 語法糖的 script 標籤內做的事相當於在 be

2022/10/06

2022/10/06

狀態管理有點像是 cookie 或 localStorage，可是又多了更多操作可以用，讓你再切換頁面時可以使用相同的變數。用來使用這個功能的套件叫做 vuex 以下不是狀態管理全部的功能，但是最常在用的其實就是這些 state 首先先來定義一個可以在各個網頁頁面取用的變數吧所有的狀態管理設定

2022/10/06

2022/10/06

[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 引入，

#網頁開發

2022/10/09

張哲嘉的沙龍

[17] Json web token authentication --part2: Django

#網頁開發

2022/10/09

小P趨勢投資

算力的盡頭是電力！009819 小P量化交易者眼中的AI基建雙引擎致勝邏輯

背景：從冷門配角到市場主線，算力與電力被重新定價小P從2008進入股市，每一個時期的投資亮點都不同，記得2009蘋果手機剛上市，當時蘋果只要在媒體上提到哪一間供應鏈，隔天股價就有驚人的表現，當時光學鏡頭非常熱門，因為手機第一次搭上鏡頭可以拍照，也造就傳統相機廠的殞落，如今手機已經全面普及，題

#AI#算力#電力

2026/04/11

小P趨勢投資

算力的盡頭是電力！009819 小P量化交易者眼中的AI基建雙引擎致勝邏輯

#AI#算力#電力

2026/04/11

釀電影，啜一口電影的美好。

性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》

這是一場修復文化與重建精神的儀式，觀眾不需要完全看懂《遊林驚夢：巧遇Hagay》，但你能感受心與土地團聚的渴望，也不急著在此處釐清或定義什麼，但你的在場感受，就是一條線索，關於如何找著自己的路徑、自己的聲音。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/03/02

釀電影，啜一口電影的美好。

性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/03/02

張哲嘉的沙龍

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

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

2022/10/09

張哲嘉的沙龍

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

2022/10/09

張哲嘉的沙龍

[8] Vue Router

Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像，用法是像

#網頁開發

2022/10/06