Vue+node.js 实现 jwt token验证

渝之涯

项目架构：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()

        }

});

 

/*

 * @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);

node.js 完整代码

参考：https://www.jianshu.com/p/663520bd7e95

 

客户端vue：

1、登陆验证获取token

     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' })

            }

登陆验证

获取到的token可以放到sessionStorage、Vuex.Store获取其他存储介质中，方便下次调用接口使用

 

2、在main.js文件，在请求拦截方法中，为请求接口加入token

需要注意的是token格式为：‘Bearer ’+token，token参数需要赋值给请求头的Authorization

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);

    }

);

axios请求头加token

请求头参数格式：

 

来源：https://www.cnblogs.com/eye-like/p/13328535.html