如何使用JWT做簡單的登入操作

註冊登入方面的鑑權對於乙個**來說是及其重要的，不僅可以保護你的個人資訊，還可以方便後續的操作。

今天和大家聊一下我們的登入註冊流程是怎麼樣的。我們知道登入方面有很多種情況，比如可以使用賬號密碼進行登入，可以使用掃碼登入，還可以使用第三方的賬號登入，其實原理都是大同小異的，無非就是驗證你的賬號是否合理以及你的登入資訊是否有效。

但是本文就是用簡單的登入流程給大家說一下其中的奧妙。一般來說我們登入成功之後服務端會返回乙個token，大家不要以為這是乙個毫無邏輯的字串，一開始我就是這麼認為的。其實token裡面就儲存了我們賬號的資訊，只不過經過加密操作而已，我們進行解密之後就可以拿到資訊了。

大家可能一開始不知道jwt是什麼，簡單來說這個就是使用者資訊的加密版，可以加密你的賬號，也可以解密。理解了這個我們就可以使用它來做一點事情了，我們這裡使用的是vue+jwt+node+mysql這樣乙個簡單的架構，我們可以在vue頁面簡單寫一下登入的操作，使用node寫乙個login的介面就可以了。

為了照顧大部分的小夥伴們，我把流程再說詳細一點。開始我們肯定要裝mysql和jsonwebtoken這兩個外掛程式的，為了更加方便之後，我還裝了express，目的就是為了使用路由的時候方便操作。

打通資料庫

api.js檔案

const mysql =
require
('mysql');
const sqlmap =
require
('./sqlmap');
//建立鏈結物件
const pool = mysql.
createpool()
//寫乙個登入介面
module.exports =)}
)},//接下來可以寫更多的介面
}

還有寫乙個介面的路由，就是你請求這個的時候就會連線資料庫和查詢資料庫

router.js檔案

const express =
require
('express');
const router = express.
router()
;const api =
require
('./api');
//這裡引入上面的檔案
router.
get(
'/login'
,(req, res, next)
=>);
//最後記得匯出
module.exports = router;

上面我還有用到乙個sqlmap的乙個物件，我們單獨寫乙個，就是為了以後方便，而且耦合性更低，容易擴充套件。

var sqlmap = 

//最後也記得要匯出
module.exports = sqlmap;

這樣我們在檔案中引入的時候就可以使用這個物件了，這裡面還可以寫很多sql的語句查詢。

說了這麼多，我們肯定要啟動服務的，那麼我們就簡單起乙個服務，可以呼叫我們寫的所有介面，這是乙個主檔案，我們把它命名為index.js檔案

const routerapi = require('./router');

const path = require('path');
const bodyparser = require('body-parser'); // post 資料解析
const express = require('express');
// 後端api路由
// 監聽埠
console.log('success listen at port:3000......');

這樣我們node index.js之後就會監聽3000埠了，到此我們的服務啟動完畢，資料庫部分也就打通了。

前端頁面

這裡我們作為講解，就不用寫一些很好看的頁面，有兩個輸入框就可以了，vue有雙向資料繫結的功能，這樣我們就可以很方便地獲取輸入框裡面的內容，使用賬號密碼傳給後端做sql查詢。怎麼樣，是不是特別簡單？

form:

比如在data下面我們就這樣來儲存輸入框的資料，如果大家可以做一些驗證之類的操作，使用elementui元件庫，你會發現新的世界。這裡就不展開了。

然後再methods裡面寫乙個login方法，用來與後端進行資料互動，這裡也是很簡單的操作。

//在script標籤下面引入：

//const jwt = require("jsonwebtoken");
//const secret = "your string"; //自己的金鑰
login()
//傳遞引數})
.then
(res =>
, secret,
//這是乙個金鑰，可以使用你喜歡的字串);
this
.$store.
commit
("set_token"
, token)
;//寫入token
this
.$router.
replace
("home");
//跳轉到主頁
}else})
;}

大家可以看到我把token寫到了vuex裡面以及放到了sessionstorage，就是以乙個全域性的狀態進行管理，比如以後再首頁顯示你的名字以及以後做許可權控制等方面都很實用。以後可以使用this.$store.state.user的形式獲取使用者資訊。

假如大家在**需要使用使用者資料的時候可以直接解析token，這裡我為了方便專門多寫了乙個字段存放使用者名稱以及身份等資訊。這裡解析資料我們就使用jwt自帶的函式方法就好，token就是你儲存在全域性的token，secret就是你當初進行加密使用的那個，這樣就可以順利解析出來了。

//這裡也要引入

//const jwt = require("jsonwebtoken");
//const secret = "your string"; //自己的金鑰
jwt.
verify
(token, secret,
function
(err, decoded)})
;

這篇文章我只講了一些如何使用jwt來進行簡單的登入驗證操作，適合一些小白同學去嘗試一下，畢竟這也是比較常用的npm包之一。網上其實很多教程都有說怎麼去使用jwt進行驗證，可能大家覺得這麼乙個簡單的知識點有必要將那麼複雜嗎？其實你不明白小白心裡的苦，當初我也是很簡單的用法都不會，也是看了很多關於細節方面的實現，最後才有所領悟。

其實我的文章講解應該是針對一些基礎比較薄弱的同學們，我明白他們想做出乙個簡單的功能但卻不知道怎麼寫的痛苦，擋當初自己也是這麼過來的。我認為講不明白別人的文章，可讀性不大，雖然我也不知道能不能講明白大家。

PHP如何使用JWT做Api介面身份認證的實現

1.jwt是什麼？jwt官網 官網簡介 json web令牌 jwt 是乙個開放標準 rfc 7519 它定義了一種緊湊且自包含的方式，用於在各方之間作為json物件安全地傳輸資訊。由於此資訊是經過數字簽名的，因此可以被驗證和信任。可以使用秘密 使用hmac演算法 或使用rsa或ecdsa的公鑰 私...

PHP的簡單登入操作

相對來講啊 這個登入後台就簡單一點，其實程式差不多，關鍵就是出現了幾點變化 第乙個還是關鍵的理清執行邏輯 1，拿到字段 使用者名稱 密碼 2，查詢使用者名稱存不存在 不存在的話返回提示，使用者名稱不存在 3，存在查詢密碼正不正確，不正確返回提示 密碼錯誤 4，使用者名稱密碼正確 跳轉到成功頁面 第二...

php做簡單的登入,PHP實現簡易使用者登入系統

最近剛剛看到php連線資料庫的例項，於是做了乙個簡易的使用者系統 直接上 連線資料庫 connect.php servername localhost username formbd password formbd dbname form 建立連線 conn new mysqli servernam...