Vue+node.js 实现 jwt token验证

渝之涯 發表於 2020-7-17 10:47:00

项目架构：vue+node.js
jwt 验证流程
1、客户端访问登陆接口（不带token），请求服务器验证
2、服务器验证通过，通过jwt返回给客户端一个token
3、客户端请求其他接口时带上从服务器获取的token
4、服务器验证客户端的token，验证通过后，返回给客户端访问接口数据
阮一峰 JSON Web Token：
http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html
 
服务端node.js
1、安装依赖
　　npm install jsonwebtoken  –save
　　npm install koa-jwt –save
2、中间件请求token
app.use(async (ctx, next) => {
    // let token = ctx.header.authorization;
    return next().catch((err) => {
        if (err.status === 404) {
            ctx.status = 404;
            ctx.body = {
                code: 404,
                msg: err.message
            }
        } else {
            throw err;
        }
    })
});
 
3、排除不验证的请求
app.use(koajwt({ secret: secret }).unless({
    // 登录接口不需要验证
    path: [/^\/api\/login/]
}));
 
4、登陆签发token
app.use(async (ctx, next) => {
     if(ctx.request.method==='POST'&&ctx.request.url==='/api/login'){
            const postData = ctx.request.body.user
            const {login_name,login_password}=JSON.parse(postData)
              //判断账号和密码是否正确
　　　　//xxx
　　　　//登陆成功返回token
             const token=sign({login_name},secret,{expiresIn:'1h'}) 
             ctx.body=token
        }else{
              //继续执行api请求
            await next()
        }
});
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_7dd5b6aa-fe98-43d7-8cf8-5bc75d323ef2" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_7dd5b6aa-fe98-43d7-8cf8-5bc75d323ef2" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_7dd5b6aa-fe98-43d7-8cf8-5bc75d323ef2" class="cnblogs_code_hide">
<pre>

/*

* @Author: wuyongxian

* @Date: 2019-11-04 17:52:58

* @Last Modified by:

* @Last Modified time: 2019-11-04 17:53:23

*/

const Koa = require('koa');

const app = new Koa();

//jwt token验证

const { sign } = require('jsonwebtoken');

const secret = 'xxx';

const koajwt = require('koa-jwt');

// 中间件对token进行验证

app.use(async (ctx, next) => {

// let token = ctx.header.authorization;

return next().catch((err) => {

 if (err.status === 404) {

 ctx.status = 404;

 ctx.body = {

 code: 404,

 msg: err.message

 }

 } else {

 throw err;

 }

})

});

//排除不验证的请求

app.use(koajwt({ secret: secret }).unless({

// 登录接口不需要验证

path: [/^\/api\/login/]

}));

app.use(async (ctx, next) => {

if(ctx.request.method==='POST'&&ctx.request.url==='/api/login'){

 const postData = ctx.request.body.user

 const {login_name,login_password}=JSON.parse(postData)

 //判断账号和密码是否正确

//xxx

//登陆成功返回token

 const token=sign({login_name},secret,{expiresIn:'1h'})

 ctx.body=token

 }else{

 //继续执行api请求

 await next()

 }

});

app.listen(3000);</pre>
</div>
node.js 完整代码</div>
参考：https://www.jianshu.com/p/663520bd7e95
 
客户端vue：
1、登陆验证获取token
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_f4fed023-d54c-4045-aed8-7f4b18eb310c" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_f4fed023-d54c-4045-aed8-7f4b18eb310c" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_f4fed023-d54c-4045-aed8-7f4b18eb310c" class="cnblogs_code_hide">
<pre> loginAuth() {

 let params = {

 login_name: this.ruleForm.username,

 login_password: md5(this.ruleForm.password)

 }

 let that = this

 //axios 请求后台接口

 api.login(params).then(res => {

 if (res.code == 0) {

 that.MSG.success(res.msg)

 that.loginSuccess(res)

 } else {//result.state==1||reuslt.state==2

 that.MSG.warning(res.msg)

 }

 })

 },

 //登陆成功

 loginSuccess(result) {

 sessionStorage.setItem('token', result.token)

 this.$router.push({ path: '/index' })

 }</pre>
</div>
登陆验证</div>
获取到的token可以放到sessionStorage、Vuex.Store获取其他存储介质中，方便下次调用接口使用
 
2、在main.js文件，在请求拦截方法中，为请求接口加入token
需要注意的是token格式为：‘Bearer ’+token，token参数需要赋值给请求头的Authorization
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_b0b76151-5b17-4517-82d1-10338298bfe3" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_b0b76151-5b17-4517-82d1-10338298bfe3" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_b0b76151-5b17-4517-82d1-10338298bfe3" class="cnblogs_code_hide">
<pre>axios.interceptors.request.use(

config => {

 //除登陆接口意外的接口都要加上token，才可以请求接口

 if (!config.url.endsWith('/api/login')) {

 if(sessionStorage.getItem('token')!=null){

 const token='Bearer '+sessionStorage.getItem('token')

 config.headers.common['Authorization']=token

 }

 }

 return config;

},

error => {

 return Promise.reject(error);

}

);</pre>
</div>
axios请求头加token</div>
请求头参数格式：
 <img src="https://img2020.cnblogs.com/blog/451237/202007/451237-20200717104720537-855692043.png" alt="" loading="lazy"> 
来源：https://www.cnblogs.com/eye-like/p/13328535.html

頁: [1]

琼殿技术论坛's Archiver

Vue+node.js 实现 jwt token验证