vue+express生成token方式
vue+express生成token
在使用vue+node開(kāi)發(fā)的過(guò)程中,在寫(xiě)登錄時(shí)候我們會(huì)使用到token驗(yàn)證,下面我來(lái)分享一下express生成token和簡(jiǎn)單的使用
安裝
npm install express-jwt npm install jsonwebtoken --save
express-jwt
內(nèi)部引用了jsonwebtoken
,對(duì)其封裝使用。在實(shí)際的項(xiàng)目中這兩個(gè)都需要引用,他們兩個(gè)的定位不一樣。jsonwebtoken
是用來(lái)生成token給客戶(hù)端的,express-jwt
是用來(lái)驗(yàn)證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 賬號(hào)密碼 expiresIn 失效時(shí)間 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獲取用戶(hù)信息 app.use(function (req, res, next) { // authorization 必須為這個(gè) 和前端保持一致 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(); }) } }); //驗(yàn)證token app.use(expressJWT({ secret: 'zxcvbnmpoiuy', // signkey 自定義秘鑰 需跟上方保持一致 algorithms: ["HS256"] }).unless({ path: ['/users/addUsers', "/users/login"]//除了這些地址,其他的URL都需要驗(yàn)證 })); // 錯(cuò)誤處理 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 驗(yàn)證 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, } //登錄前查詢(xún)數(shù)據(jù)庫(kù)有無(wú)此賬號(hào) const data = await User.find().where({ phone: req.body.phone }) if (data.length == 0) { res.send({ code: 500, success: false, msg: "該用戶(hù)沒(méi)有注冊(cè)。請(qǐng)先前往注冊(cè)" }) return } // 驗(yàn)證密碼 if (data.length != 0 && data[0].passWord !== req.body.passWord) { res.send({ code: 500, success: false, msg: "密碼錯(cuò)誤,請(qǐng)重新驗(yàn)證" }) return } Ctoken.setToken(bady).then((data) => { let CObj = { code: 200, msg: "登錄成功", token: data } res.json(CObj); }); })
錯(cuò)誤
expressjwt is not a function
版本太高。
只需要將pakage.json中的express-jwt版本改為6.1.1,重新npm i 即可使用。
express-jwt新特性請(qǐng)自行前往npm官網(wǎng)查看。
algorithms should be set
在app.use(expressJWT) 這個(gè)配置中添加 algorithms: [“HS256”];
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)路由懶加載及組件懶加載的方式
懶加載簡(jiǎn)單來(lái)說(shuō)就是延遲加載或按需加載,即在需要的時(shí)候的時(shí)候進(jìn)行加載。這篇文章主要介紹了vue路由懶加載及組件懶加載 ,需要的朋友可以參考下2019-06-06vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D
這篇文章主要介紹了vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10詳解vue中router-link標(biāo)簽所必備了解的屬性
這篇文章主要介紹了vue中router-link標(biāo)簽所必備了解的屬性,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04淺析Vue2和Vue3中雙向綁定機(jī)制的優(yōu)化與差異
Vue.js?核心特性之一就是雙向綁定,本文將深入探討?Vue2?和?Vue3?在雙向綁定上的區(qū)別,并分析這些改進(jìn)對(duì)性能和開(kāi)發(fā)體驗(yàn)的影響,希望對(duì)大家有所幫助2024-11-11Vue Form表單的使用方法(rules格式校驗(yàn)網(wǎng)絡(luò)校驗(yàn)鍵盤(pán)按鍵監(jiān)聽(tīng))
本文介紹了在Vue.js中使用表單校驗(yàn)規(guī)則(rules)進(jìn)行網(wǎng)絡(luò)請(qǐng)求校驗(yàn)的方法,以及如何通過(guò)formRef引用表單對(duì)象并進(jìn)行鍵盤(pán)按鍵監(jiān)聽(tīng),感興趣的朋友跟隨小編一起看看吧2024-11-11vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法
本文主要介紹了vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09