vue+express生成token方式
vue+express生成token
在使用vue+node開發(fā)的過程中,在寫登錄時候我們會使用到token驗證,下面我來分享一下express生成token和簡單的使用
安裝
npm install express-jwt npm install jsonwebtoken --save
express-jwt內(nèi)部引用了jsonwebtoken,對其封裝使用。在實際的項目中這兩個都需要引用,他們兩個的定位不一樣。jsonwebtoken是用來生成token給客戶端的,express-jwt是用來驗證token的。
新建token.js文件
//用于生成和解析token
var jwt = require('jsonwebtoken');
var signkey = 'zxcvbnmpoiuy';//自定義秘鑰
exports.setToken = function (phone, pasaWord) {
return new Promise((resolve, reject) => {
const rule = {
phone: phone,
pasaWord: pasaWord
}
// rule 賬號密碼 expiresIn 失效時間
const token = jwt.sign(rule, signkey, { expiresIn: '1h' });
resolve(token);
})
}
exports.verToken = function (token) {
return new Promise((resolve, reject) => {
var info = jwt.verify(token.split(' ')[1], signkey);
resolve(info);
})
}app.js中配置
var vertoken = require('./utils/token');
var expressJWT = require('express-jwt');
// 解析token獲取用戶信息
app.use(function (req, res, next) {
// authorization 必須為這個 和前端保持一致
var token = req.headers['authorization'];
if (token == undefined) {
return next();
} else {
vertoken.verToken(token).then((data) => {
req.data = data;
return next();
}).catch((error) => {
return next();
})
}
});
//驗證token
app.use(expressJWT({
secret: 'zxcvbnmpoiuy', // signkey 自定義秘鑰 需跟上方保持一致
algorithms: ["HS256"]
}).unless({
path: ['/users/addUsers', "/users/login"]//除了這些地址,其他的URL都需要驗證
}));
// 錯誤處理
app.use(function (err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message
res.locals.error = req.app.get('env') === 'development' ? err : {}
// render the error page
res.status(err.status || 500)
if (err.status == 401) {
res.send(httpRequest.untoken())
} else if (err.status == 404) {
res.send(httpRequest.notFound())
} else {
res.send({ code: err.status, data: {}, msg: err.status })
}
})在接口中使用
// token 驗證
var jwt = require('jsonwebtoken');
var Ctoken = require('../utils/token');
router.post('/login', async function (req, res, next) {
let bady = {
phone: req.body.phone,
passWord: req.body.passWord,
}
//登錄前查詢數(shù)據(jù)庫有無此賬號
const data = await User.find().where({
phone: req.body.phone
})
if (data.length == 0) {
res.send({
code: 500,
success: false,
msg: "該用戶沒有注冊。請先前往注冊"
})
return
}
// 驗證密碼
if (data.length != 0 && data[0].passWord !== req.body.passWord) {
res.send({
code: 500,
success: false,
msg: "密碼錯誤,請重新驗證"
})
return
}
Ctoken.setToken(bady).then((data) => {
let CObj = {
code: 200,
msg: "登錄成功",
token: data
}
res.json(CObj);
});
})
錯誤
expressjwt is not a function
版本太高。
只需要將pakage.json中的express-jwt版本改為6.1.1,重新npm i 即可使用。
express-jwt新特性請自行前往npm官網(wǎng)查看。
algorithms should be set
在app.use(expressJWT) 這個配置中添加 algorithms: [“HS256”];
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue3使用別名報錯問題的解決辦法(vetur插件報錯問題)
最近在寫一個購物網(wǎng)站使用vue,使用中遇到了問題,下面這篇文章主要給大家介紹了關(guān)于vue3使用別名報錯問題的解決辦法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue使用keep-alive無效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無效以及include和exclude用法解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例詳解
這篇文章主要介紹了Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
使用vuex的時候,出現(xiàn)this.$store為undefined問題
這篇文章主要介紹了使用vuex的時候,出現(xiàn)this.$store為undefined問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06

