快捷導(dǎo)航

Vue express鑒權(quán)零基礎(chǔ)入門(mén)

更新時(shí)間：2023年02月15日 08:31:07 作者：星海拾遺

這篇文章主要介紹了詳解express鑒權(quán)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文主要目的是介紹鑒權(quán)，那么默認(rèn)讀者已經(jīng)配置完成了express的跨域基本配置以及options請(qǐng)求處理以及post請(qǐng)求參數(shù)接收如果沒(méi)有配置也沒(méi)有關(guān)系，試一下我封裝的包，不好用你找我麻煩

npm i wxs-express-config

	const wxsExpressConfig = require("wxs-express-config");
	// 返回一個(gè)經(jīng)過(guò)wxs封裝之后的app
	const app = wxsExpressConfig();

這個(gè)app就是經(jīng)過(guò)我封裝后的express app，但是默認(rèn)設(shè)置了全局跨域和接受post請(qǐng)求參數(shù)等配置。如果不想全局跨域可以這樣配置

	// 返回一個(gè)經(jīng)過(guò)wxs封裝之后的app
	const app = wxsExpressConfig({ CROSURL: "http://localhost:3000" });

token圖示一點(diǎn)通

看這個(gè)示意圖就知道校驗(yàn)過(guò)程是很簡(jiǎn)單的，實(shí)際操作起來(lái)更加簡(jiǎn)單。

express鑒權(quán)

下載加密/解密包

在express中鑒權(quán)需要用到一個(gè)玩意兒，為了避免出錯(cuò)，這里指定一下版本

// jsonwebtoken 加密用的 express-jwt是解密用的
npm i jsonwebtoken@8.5.1

加密基本使用（生成token）

第一步毫無(wú)疑問(wèn)的是引入

const jwt = require("jsonwebtoken");

使用jsonwebtoken生成token就只有一行代碼

jwt.sign('需要加密的信息', '自定義的加密密鑰', '額外的配置信息，一般是Token過(guò)期時(shí)間'),

舉個(gè)??

jwt.sign({<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--> username: "wxs" }, '巴啦啦小魔仙隨地大小變', {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--> expiresIn: "10s" }),

這里就生成了一個(gè)用巴啦啦小魔仙隨地大小變密鑰加密{ username: “wxs” }且有效時(shí)間為10s的Token

傳遞Token

express定義一個(gè)接口

	app.post("/login", (req, res) => {
	  res.send({
	    code: 0,
	    message: "登錄成功",
	    token: jwt.sign({ username: "wxs" }, secretKey, { expiresIn: "10s" }),
	  });
	});
	app.listen(3001, () => {
	  console.log("your localServer is running on http://localhost:3001");
	});

查看token

使用postman

驗(yàn)證token

再定義另一個(gè)接口

	app.get("/getUserInfo", (req, res) => {
	  try {
	    jwt.verify(req.query.token, secretKey);
	    res.send("一個(gè)get請(qǐng)求想獲取用戶(hù)信息");
	  } catch (err) {
	    res.send("過(guò)期了，請(qǐng)重新登錄");
	  }
	});

postMan編輯如下