張哲嘉的沙龍

付費限定

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

張哲嘉

2022/10/09閱讀時間約 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

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

本篇內容共 1258 字、0 則留言，僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。

張哲嘉的沙龍Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你

張哲嘉的沙龍

9會員

49內容數

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

留言0

查看全部

發表第一個留言支持創作者！

張哲嘉的沙龍的其他內容

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

[16] Json web token authentication --part1: JWT introduction

session & token 驗證機制早期是用 session，server 這裡會發一個 session 給 client，並在資料庫記錄這個 session 屬於誰，而且每個裝置都會記一組 session，這會造成 server 這邊需要記錄大量的資料。後來發展出 token，client

[15] 用 POST 串起前後端

講完 get 來講 post，那這兩個 call api 的方法有什麼差別呢？先記得一個原則，要傳遞機密的資料用 post，如果要傳遞的參數被別人知道也無所謂就用 get post 是傳遞資料到後台，資料不會顯示在 url 上，get 是傳遞參數到後台，參數會直接顯示在 url 上和後端的終端上，像

[14] 用 GET 串起前後端

前端和後端溝通，最常用就是 get 和 post 後端先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api function1 內的第一個參數是前端的 request，之後第二個參數第三個參數可以隨便你設，這倒是沒有限制用 request.GET 這個

[13] Compare axios, ajax, fetch

接下來要講前後端怎麼溝通，最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論，個人推薦使用 axios，那他們又有什麼優缺點呢？讓我簡單講解一下 ajax ajax 用法有點麻煩，要先引入 jQuery，用法如下 ajax 比起 axios 較為笨重也較不安全

[12] Django app

Create app django 的架構是這樣的，在專案底下有 app，你的 api 會寫在 app 底下，這樣好處就是可以分門別類，不同功能寫在不同 app 內建立 app 的指令如下比方說我建立了一個 app 叫 app，那專案內就會多了個 app 路徑 settings.py 把這個 a

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

[16] Json web token authentication --part1: JWT introduction

session & token 驗證機制早期是用 session，server 這裡會發一個 session 給 client，並在資料庫記錄這個 session 屬於誰，而且每個裝置都會記一組 session，這會造成 server 這邊需要記錄大量的資料。後來發展出 token，client

[15] 用 POST 串起前後端

講完 get 來講 post，那這兩個 call api 的方法有什麼差別呢？先記得一個原則，要傳遞機密的資料用 post，如果要傳遞的參數被別人知道也無所謂就用 get post 是傳遞資料到後台，資料不會顯示在 url 上，get 是傳遞參數到後台，參數會直接顯示在 url 上和後端的終端上，像

[14] 用 GET 串起前後端

前端和後端溝通，最常用就是 get 和 post 後端先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api function1 內的第一個參數是前端的 request，之後第二個參數第三個參數可以隨便你設，這倒是沒有限制用 request.GET 這個

[13] Compare axios, ajax, fetch

接下來要講前後端怎麼溝通，最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論，個人推薦使用 axios，那他們又有什麼優缺點呢？讓我簡單講解一下 ajax ajax 用法有點麻煩，要先引入 jQuery，用法如下 ajax 比起 axios 較為笨重也較不安全

[12] Django app

Create app django 的架構是這樣的，在專案底下有 app，你的 api 會寫在 app 底下，這樣好處就是可以分門別類，不同功能寫在不同 app 內建立 app 的指令如下比方說我建立了一個 app 叫 app，那專案內就會多了個 app 路徑 settings.py 把這個 a

你可能也想看

Google News 追蹤

方格子 vocus 官方沙龍

「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！

這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～

#天天秋嗨嗨 #秋季旅遊 #秋季穿搭

MimiVsJames的美股投資分享

美國大選『終局之戰』（Endgame）即將展開，美股將迎來新世紀？（上篇：模型推導寶座花落誰家？）

美國總統大選只剩下三天，我們觀察一整週民調與金融市場的變化（包含賭局），到本週五下午3:00前為止，誰是美國總統幾乎大概可以猜到60-70%的機率，本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變

#美股 #美國大選 #投資理財

矮袋鼠律師的沙龍

如果這個世界有神，那祂一定姓李名相赫｜矮袋鼠律師

Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位王多多的點評「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...

#Faker #電競 #運動

深夜限定的餅乾店

【18禁】借電車票的渣男（乙女向）

漫畫原名：電車賃を借りたクズ男くん創作者：白いお布団頁數：36P 概述：講述一名帥氣男性不夠錢搭電車，被旁邊的漂亮姐姐出手相助，本來要還錢，卻一步步跨越那條『禁忌』的界線。本部作品的瑟瑟作畫動感強烈，代入感十足，最後，大反轉，不看到最後會看不懂前面的內容。

#18禁 #漫畫 #限制級

瓶中信的流浪之旅

18歲第一次打工當電話銷售，發現自己……

18歲了!總要做點不一樣事啊! 跌倒了就再爬起，何懼! 難過了就哭一下，無礙!

#18歲 #打工仔

鮪魚肚的中醫經方世界

18.夫諸病在藏，欲攻之，當隨其所得而攻之，如渴者與豬苓湯，余皆仿此。

豬苓湯方（治療腎結石、膀胱結石）澤瀉3~5、茯苓3、豬苓3、滑石3、阿膠一錢注意：漢制劑量八兩等於現今的六錢，一錢等於3.75公克。上方方劑內容的劑量單位為「錢」。「夫諸病在藏，欲攻之，當隨其所得而攻之」，就是病在裡面的時候，了解致病的機轉，用正確的方式來去除致病的病因，這樣病才會

#金匱 #倪海廈 #中醫

勿忘的小說

18章白面者使者、霧雄

白面者分身的屍骨不斷的被白鬧吸收白鬧因此獲得了一隻強大的戰力與白面者分身的記憶 “毀滅獸矛嗎?呵呵…”白鬧得知白面者接下來的行動，他對此感到不屑之後白鬧便跟白無奇、潮一起回家了隔天他就得知了第二代責任者日崎御角逝世的消息，他對此感到羨慕因為對於吸血鬼來

#小說 #小說連載 #同人小說

李的人生回憶錄

18歲│不自殺的理由

有人說真正要自殺的人，是不會告訴你的。而自殘的人，其實是想活下的人。

#憂鬱症 #自我成長 #家庭關係

瘋愛塔羅占卜驛站

18歲後感知力事件簿-14〔心誠不一定靈〕

有神就拜，心誠則靈，但，若拜的非正神，而是孤魂邪靈，求的並非常理之事，我所見，緘口結舌。古曼童事件以往業務工作同事，為了無法起色的業績，嘗試了旁門左道，開始養起古曼童，祈求業績幫助。她與台灣賣家訂購古曼童娃娃，回家安頓參拜餵養。｜古曼童在泰國也稱金童，是將嬰靈引領至假娃娃身上，另

#古曼童 #邪靈 #心靈

勿忘的小說

18章石川與獸耳宮村、黑水、仙石

某天，黑水跟仙石與禮未在走廊上邊走邊聊，而聊了一段時間後，仙石注意到了附近搖搖晃晃的石川 “石川同學，你沒事吧！整個人看起來搖搖晃晃的” “喔！是仙石啊，你這幾天待在屋子裡好好的，過幾天我就給你買好的貓罐頭吃” 聽到‘貓罐頭’三字的禮未一臉驚恐的看向了仙石，仙石則是瘋狂的給自

#堀與宮村 #小說 #同人小說

Darkness Unclebigrun

可能包含敏感內容

【18禁】西西來探班

這是一篇描述兩位有才華的香港女性作家的故事，西西是文字作者，JC是插畫繪師。文章描述了兩人在工作室的故事，充滿愛情和慾望的氛圍。

#原創小說 #百合 #百合小說

阿浣的沙龍

18歲是愛美的年紀

L是我大學的系上學妹，因為都住在離學校有一段距離的板橋地區，時常能在校車上遇見她，畫著重重的腮紅、粗黑的眉毛，笑容滿面地和我打招呼，一雙眼睛亮亮的，讓人有些可惜臉上厚重的妝容反而壓了她的靈氣，但也別有種青春可愛。這是台北某個天氣格外好的早晨，陽光從右側撒下、靠著校車窗戶發呆的我，臉頰漸漸有些滾燙

方格子 vocus 官方沙龍

「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！

這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～

#天天秋嗨嗨 #秋季旅遊 #秋季穿搭

MimiVsJames的美股投資分享

美國大選『終局之戰』（Endgame）即將展開，美股將迎來新世紀？（上篇：模型推導寶座花落誰家？）

美國總統大選只剩下三天，我們觀察一整週民調與金融市場的變化（包含賭局），到本週五下午3:00前為止，誰是美國總統幾乎大概可以猜到60-70%的機率，本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變

#美股 #美國大選 #投資理財

矮袋鼠律師的沙龍

如果這個世界有神，那祂一定姓李名相赫｜矮袋鼠律師

Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位王多多的點評「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...

#Faker #電競 #運動

深夜限定的餅乾店

【18禁】借電車票的渣男（乙女向）

漫畫原名：電車賃を借りたクズ男くん創作者：白いお布団頁數：36P 概述：講述一名帥氣男性不夠錢搭電車，被旁邊的漂亮姐姐出手相助，本來要還錢，卻一步步跨越那條『禁忌』的界線。本部作品的瑟瑟作畫動感強烈，代入感十足，最後，大反轉，不看到最後會看不懂前面的內容。

#18禁 #漫畫 #限制級

瓶中信的流浪之旅

18歲第一次打工當電話銷售，發現自己……

18歲了!總要做點不一樣事啊! 跌倒了就再爬起，何懼! 難過了就哭一下，無礙!

#18歲 #打工仔

鮪魚肚的中醫經方世界

18.夫諸病在藏，欲攻之，當隨其所得而攻之，如渴者與豬苓湯，余皆仿此。

豬苓湯方（治療腎結石、膀胱結石）澤瀉3~5、茯苓3、豬苓3、滑石3、阿膠一錢注意：漢制劑量八兩等於現今的六錢，一錢等於3.75公克。上方方劑內容的劑量單位為「錢」。「夫諸病在藏，欲攻之，當隨其所得而攻之」，就是病在裡面的時候，了解致病的機轉，用正確的方式來去除致病的病因，這樣病才會

#金匱 #倪海廈 #中醫

勿忘的小說

18章白面者使者、霧雄

白面者分身的屍骨不斷的被白鬧吸收白鬧因此獲得了一隻強大的戰力與白面者分身的記憶 “毀滅獸矛嗎?呵呵…”白鬧得知白面者接下來的行動，他對此感到不屑之後白鬧便跟白無奇、潮一起回家了隔天他就得知了第二代責任者日崎御角逝世的消息，他對此感到羨慕因為對於吸血鬼來

#小說 #小說連載 #同人小說

李的人生回憶錄

18歲│不自殺的理由

有人說真正要自殺的人，是不會告訴你的。而自殘的人，其實是想活下的人。

#憂鬱症 #自我成長 #家庭關係

瘋愛塔羅占卜驛站

18歲後感知力事件簿-14〔心誠不一定靈〕

有神就拜，心誠則靈，但，若拜的非正神，而是孤魂邪靈，求的並非常理之事，我所見，緘口結舌。古曼童事件以往業務工作同事，為了無法起色的業績，嘗試了旁門左道，開始養起古曼童，祈求業績幫助。她與台灣賣家訂購古曼童娃娃，回家安頓參拜餵養。｜古曼童在泰國也稱金童，是將嬰靈引領至假娃娃身上，另

#古曼童 #邪靈 #心靈

勿忘的小說

18章石川與獸耳宮村、黑水、仙石

某天，黑水跟仙石與禮未在走廊上邊走邊聊，而聊了一段時間後，仙石注意到了附近搖搖晃晃的石川 “石川同學，你沒事吧！整個人看起來搖搖晃晃的” “喔！是仙石啊，你這幾天待在屋子裡好好的，過幾天我就給你買好的貓罐頭吃” 聽到‘貓罐頭’三字的禮未一臉驚恐的看向了仙石，仙石則是瘋狂的給自

#堀與宮村 #小說 #同人小說

Darkness Unclebigrun

可能包含敏感內容

【18禁】西西來探班

這是一篇描述兩位有才華的香港女性作家的故事，西西是文字作者，JC是插畫繪師。文章描述了兩人在工作室的故事，充滿愛情和慾望的氛圍。

#原創小說 #百合 #百合小說

阿浣的沙龍

18歲是愛美的年紀

L是我大學的系上學妹，因為都住在離學校有一段距離的板橋地區，時常能在校車上遇見她，畫著重重的腮紅、粗黑的眉毛，笑容滿面地和我打招呼，一雙眼睛亮亮的，讓人有些可惜臉上厚重的妝容反而壓了她的靈氣，但也別有種青春可愛。這是台北某個天氣格外好的早晨，陽光從右側撒下、靠著校車窗戶發呆的我，臉頰漸漸有些滾燙