node后端+vue前端實現(xiàn)接口請求時攜帶authorization驗證
我們在寫web項目時，后端寫好接口，前端想要調(diào)用后端接口時，除了登錄注冊頁面，所有的請求都需要攜帶authorization，這樣是為了避免隨意通過接口調(diào)取數(shù)據(jù)的現(xiàn)象發(fā)生。這是寫web項目時最基礎(chǔ)的點，但是也挺麻煩的，涉及前后端好幾個地方的編碼，經(jīng)常忘記怎么寫的，現(xiàn)在記錄一下。
總體流程如下：
- 后端使用中間件開啟接口請求驗證，除登錄/注冊外所有接口的請求都需要攜帶驗證參數(shù)才能正確發(fā)起請求
- 前端登錄時，存儲驗證消息，也就是token
- 請求攔截器中設(shè)置請求頭，寫入authorization
大體就這么幾個步驟，下面細化
一、后端開啟接口請求驗證
我是用node寫的后端，請求驗證寫在后端入口程序app.js中，完整代碼如下：
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const multer = require("multer");
const upload = multer({ dest: "./public/upload" });
const morgan = require("morgan");
const fs = require("fs");
const app = express();
// 創(chuàng)建一個寫入流，將日志寫入access.log文件
const accessLogStream = fs.createWriteStream("./access.log", { flags: "a" });
// 使用Morgan中間件，將日志寫入控制臺和文件
app.use(morgan("combined", { stream: accessLogStream }));
app.use(cors());
app.use(express.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 托管靜態(tài)文件
app.use(upload.any());
app.use(express.static("./public"));
// 處理錯誤的中間件
app.use((req, res, next) => {
res.cc = (err, status = 1) => {
res.send({
status,
message: err instanceof Error ? err.message : err,
});
};
next();
});
const jwtconfig = require("./jwt_config/index");
const { expressjwt: jwt } = require("express-jwt");
app.use(
jwt({
secret: jwtconfig.jwtSecretKey,
algorithms: ["HS256"],
}).unless({
path: [/^\/api\/user\/.*$/],
})
);
const userManagerRouter = require("./router/user");
app.use("/api/user", userManagerRouter);
const userInfoManageRouter = require("./router/userinfo");
app.use("/api/userinfo", userInfoManageRouter);
const settingRouter = require("./router/setting");
app.use("/api/setting", settingRouter);
const productRouter = require("./router/product");
app.use("/api/product", productRouter);
const messageRouter = require("./router/message");
app.use("/api/message", messageRouter);
const filesRouter = require("./router/files");
app.use("/api/files", filesRouter);
const logRouter = require("./router/log");
app.use("/api/log", logRouter);
const overviewRouter = require('./router/overview')
app.use('/api/overview', overviewRouter)
// 用戶消息讀取情況
const dmMsgRouter = require('./router/department_msg')
app.use('/api/dm', dmMsgRouter)
// 對不符合joi規(guī)則的情況進行報錯
// app.use((err, req, res, next) => {
// if (err instanceof Joi.ValidationError) return res.cc(err.details[0].message);
// else res.cc(err);
// });
app.listen(3088, () => {
console.log("api server running at http://127.0.0.1:3088");
});
這個程序太長，相關(guān)的代碼如下：
const jwtconfig = require("./jwt_config/index");
const { expressjwt: jwt } = require("express-jwt");
app.use(
jwt({
secret: jwtconfig.jwtSecretKey,
algorithms: ["HS256"],
}).unless({
path: [/^\/api\/user\/.*$/],
})
);
其實這個寫法相對來說是固定的，首先，導入自己寫好的jwt驗證規(guī)則（也叫秘鑰），其實就是一個jwtSecretKey，./jwt_config目錄下的index.js文件如下：
module.exports = {
jwtSecretKey: 'xxx' // 改成自己的秘鑰
}
然后導入express-jwt，接下來就是使用中間件來設(shè)定接口路由規(guī)則了，unless方法里面寫的是排除的接口地址，是用正則表達式來排除的，/^\/api\/user\/.*$/這個正則表達式的意思是排除所有以/api/user/開頭的接口
可以看上面的完整代碼，app.use("/api/user", userManagerRouter);這里以/api/user/開頭的接口都是給用戶登錄和注冊相關(guān)的接口
后端按這個思路寫就行了
二、登錄存儲token
這里有兩種存儲方式，一種是把token存儲在localstorage中，另外一種是存儲在全局數(shù)據(jù)管理工具中（也就是vuex或者pinia中），這里設(shè)計前后端聯(lián)調(diào)
1、后端寫登錄接口，向前端傳遞token
先看看我的完整的登錄接口處理函數(shù)
exports.login = (req, res) => {
// res.send("login");
const userInfo = req.body;
const sql = "select * from users where account = ?";
db.query(sql, userInfo.account, (err, results) => {
if (err) return res.cc(err);
if (results.length !== 1) return res.cc("用戶不存在");
const compareResult = bcrypt.compareSync(
userInfo.password,
results[0].password
);
if (!compareResult) return res.cc("密碼錯誤");
// 判斷賬號是否凍結(jié)
if (results[0].status == 1) return res.cc("賬號被凍結(jié)");
const user = {
...results[0],
password: "",
imageUrl: "",
create_time: "",
update_time: "",
};
const tokenStr = jwt.sign(user, jwt_config.jwtSecretKey, {
expiresIn: "10h",
});
res.send({
status: 0,
results: results[0],
message: '登錄成功',
token: "Bearer " + tokenStr
})
});
};
相關(guān)的代碼如下：
const tokenStr = jwt.sign(user, jwt_config.jwtSecretKey, {
expiresIn: "10h",
});
res.send({
status: 0,
results: results[0],
message: '登錄成功',
token: "Bearer " + tokenStr
})
這里其實很簡單，就是后端通過秘鑰生成一個有效期為10小時的token，這里的秘鑰也是上面提到的，然后向前端發(fā)送這個token
2、前端登錄時，存儲token
我用的vue3，數(shù)據(jù)存儲在pinia中，看看我的前端登錄代碼
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const loginCB = async () => {
const { account, password } = form.value
const data = { account, password }
loginFormRef.value.validate(async valid => {
if (valid) {
try {
await userStore.getUserInfo(data)
// console.log(userStore.userInfo)
if (!userStore.userInfo.token) return ElMessage.error('用戶名或密碼錯誤')
// console.log(userStore.vue3ManageUserInfo)
router.push('/')
// console.log(results)
} catch (error) {
ElMessage.error('用戶名或密碼錯誤')
console.log(error)
}
} else {
ElMessage.error('沒通過校驗')
}
})
}
上面這段代碼不是完整的，loginCB是登錄按鈕的回調(diào)函數(shù)，從回調(diào)中看到，其實我的登錄是寫在pinia的getUserInfo方法中的，繼續(xù)看看這個store中的寫法
import { ref } from "vue";
import { defineStore } from "pinia";
import { loginAPI } from "@/apis/user";
import { getUserInfoAPI } from "@/apis/userinfo";
import { loginLogAPI } from "@/apis/log";
export const useUserStore = defineStore(
"user",
() => {
const userInfo = ref({});
const getUserInfo = async (data) => {
const res = await loginAPI(data);
// console.log(res);
userInfo.value = {
account: res.results.account,
token: res.token,
avatar: res.results.image_url,
id: res.results.id,
name: res.results.name,
sex: res.results.sex,
email: res.results.email,
department: res.results.department,
identity: res.results.identity
};
// 登錄日志
await loginLogAPI({
account: res.results.account,
name: res.results.name,
email: res.results.email,
});
// console.log(userInfo.value)
};
// 修改頭像
const changeAvatar = (url) => {
userInfo.avatar = url;
};
// 修改姓名
const changeName = (name) => {
userInfo.name = name;
};
// 解決刷新頁面丟失store信息的問題
const clearUserInfo = () => {
userInfo.value = {};
};
return {
userInfo,
getUserInfo,
clearUserInfo,
changeAvatar,
changeName,
};
},
{
persist: true,
}
);
pinia中我用的是組合式api的寫法，其實也是比較流行的寫法，邏輯和語法都比較清楚
可以看到，我定義了一個userInfo的state，登錄需要調(diào)用loginAPI，這個接口對應(yīng)后端的login函數(shù)，請求到數(shù)據(jù)后，將接口返回的token寫入到userInfo.token中，這樣，全局數(shù)據(jù)管理store中就存儲了一個包含token的名為userInfo的state（真的繞。。。）
注意，組合式api需要將state return出去
{
persist: true,
}
上面這個是持久化存儲，我在“vue3+pinia用戶信息持久緩存（token)的問題”這篇博客中有記錄，目的是將userInfo存儲到localstorage中
這樣，登錄時要做的工作就做完了
三、請求攔截器中攜帶token
使用axios發(fā)起接口請求，對axios進行二次封裝，封裝代碼如下：
import axios from "axios";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/user";
// 創(chuàng)建axios實例
const http = axios.create({
baseURL: "http://127.0.0.1:xxxx/api/", // 改成自己的端口
timeout: 5000,
});
// axios請求攔截器
http.interceptors.request.use(
(config) => {
const userStore = useUserStore();
const token = userStore.userInfo.token;
if (token) {
config.headers.Authorization = token;
}
return config;
},
(e) => Promise.reject(e)
);
// axios響應(yīng)式攔截器
http.interceptors.response.use(
(res) => res.data,
(e) => {
ElMessage.warning("接口響應(yīng)出錯");
console.log(e);
return Promise.reject(e);
}
);
export default http;
注意看請求攔截器中的代碼，用到了剛剛上面提到的pinia中的userInfo這個state，首先獲取userInfo中的token，判斷是否存在token，存在的話，就把它寫到請求頭中去，關(guān)鍵的代碼就是下面這行：
config.headers.Authorization = token;文章來源：http://www.zghlxwxcb.cn/news/detail-782823.html
這樣，每次向后端發(fā)起數(shù)據(jù)請求的時候，都會攜帶這個token了（除了登錄和注冊，因為不存在），后端的中間件也能通過驗證了文章來源地址http://www.zghlxwxcb.cn/news/detail-782823.html
到了這里，關(guān)于node后端+vue前端實現(xiàn)接口請求時攜帶authorization驗證的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
