vue+node.js前后端交互中的token令牌验证

这篇文章分享一下本人学习vue+node.js前后端交互中的登录token令牌的心得

最近准备写一个个人博客网站，前端采用的是vue+element，后端用node.js
在做用户登录的时候就想到
如果不给每个页面进行用户登录状态判断的话,是不是就可以直接跳过登录进行操作呢?
显然如果让用户跳过登录直接进行网站的功能操作是不可行的
于是就在网上查资料，最后想到了用token令牌验证的方法
那咱们直接进入正题

一、前端登录时向后端发起请求,并携带登录信息

原理：前端发起登录请求,将登录信息(可以是账号密码)存入请求头header的Authorization中，后端接收Authorization中的信息进行解析

为了方便前端接口的书写，我使用了axios进行请求的封装

1:在vue项目中的main.js中引入axios

import axios from 'axios'

如果你没有下载axios(如果是创建的vue项目的话，基本都会下载axios吧 0.0)
在vue项目中打开控制台

npm install axios -s

下载完之后，同上在vue项目中的main.js中引入axios

2.挂载axios原型

在main.js中写这个,将$http挂载为axios原型

Vue.prototype.$http=axios

3.向后端发起请求

怎么发起请求都不重要！只要你能成功发起请求就可以

this.$http.post('/userLogin',this.loginForm)

我用的是异步请求

const {data: res} = await this.$http.post('/userLogin',this.loginForm)
console.log(res)

二、后端接收登录请求，判断用户id后给responce添加token令牌并发送给前端

这里要注意一下，后端必须添加以下字段，不然会有跨域错误！
res.header中的Authorization一定要设置，不然接不到前端发来的token

app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*') //允许所有不同源的地址访问res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization') //Content-Type必须要设置，Authorization是用户登录注册时存入的token值，可根据需求来设置，还有其他的都需要用逗号隔开res.header('Access-Control-Allow-Credentials', true) // 这个必须要设置，否则解决跨域无效，注意true是字符串next()
})

1、后端接到前端的账号密码之后，从数据库中判断账号密码的正确性

我这里用的是mysql，账号密码的校验这里不做解释

 const sql =`select UserName,Sex,UserId from user  where UserId='${JSON.parse(DATA).userId}' and PassWord ='${JSON.parse(DATA).passWord}'`

2.给响应添加token

这里需要安装一个token模块 jsonwebtoken

2.1 安装jsonwebtoken模块并简单配置

在终端安装模块

npm install jsonwebtoken

创建一个js文件

然后简单封装配置，并把js文件expors出去

const jwt = require('jsonwebtoken');
const token = {encrypt:function(data,time){return jwt.sign(data,'token',{expiresIn:time})},decrypt:function(token){try{let data = jwt.verify(token,'token');console.log("data",data);return{token:true,id:data.id};} catch(e){return{token:false,data:e}}}}
module.exports = {token}

在login.js中导入文件

const {token} = require('../Tools/token')

注意上方的路径是你自己项目中token.js的路径

2.2 根据登录用户的id，为此id添加token密钥

使用token.excrypt方法需要传递两个参数，一个为数据，我这里用的是用户id(必须为对象格式)，一个是token失效时间，这里是15天
最后会生成一个密钥，你可以自己试试，每个密钥都可以通过解密转换成用户的id，供以后后端进行验证

let Token =token.encrypt({id:JSON.parse(DATA).userId},'15d')

下面是我自己的代码，目的是生成token后，将token与用户信息一起传给前端


req.on("data",async function(DATA){const sql =`select UserName,Sex,UserId from user  where UserId='${JSON.parse(DATA).userId}' and PassWord ='${JSON.parse(DATA).passWord}'`console.log( JSON.parse(DATA).userId);let userInfo =await exec(sql)console.log("userid",JSON.parse(DATA).userId);//发送给前端的数据let User={} //发送给前端的data数据 包含token等let data={}//发送给前端的meta数据 包含status msg等let meta={}if(userInfo.length>0){let Token =token.encrypt({id:JSON.parse(DATA).userId},'15d')for(var item in userInfo){data['Token'] = Tokendata['userInfo'] = userInfo[item]}meta['status'] = 201meta['msg'] = '登录成功!' User['data']=dataUser['meta']=metares.send(User)}else{meta['status'] = 200meta['msg'] = '登录失败!'User['meta']=metares.send(User)}})

三、前端发送登录请求后接收到后端传来用户信息以及token，将token存入storage中

1

将token存入名为Token的storage中，供以后调用

window.sessionStorage.setItem('Token', res.data.Token)

2 在vue main.js中通过axios拦截器添加token，使每次请求都能将token传给后端

这样做的话，每次请求都会将token发给后端，后端接到token后将其解密，可以判断当前用户是否处于登陆状态

//在连接端口之前，通过axios拦截器添加token，保证拥有获取数据的权限.
axios.interceptors.request.use(config=>{//console.log(config);//为请求头对象添加token验证的Authorization字段config.headers.Authorization=window.sessionStorage.getItem('Token')console.log(config.headers.Authorization);return config
})

四、后端获取token并解密

在后端的接口函数中判断请求头中的authorization 是否存在，如果不存在，则证明用户没有登陆，如果存在，就可以进行进一步操作
token.decrypt可以对加密的token进行解密，得到用户的id

if(req.headers.authorization == 'null'){console.log("您没有权限!");res.send("您没有权限!")}else{let tokenData = token.decrypt(req.headers.authorization)console.log(tokenData);let sql =`select TITLE,BLOG_ID,TIME from blog where AUTHOR_ID=${tokenData.id}`let userInfo =await exec(sql)console.log(JSON.stringify(userInfo));res.send(userInfo)    }

得到用户的id后就说明用户处于登录状态，就可以进行其他的操作啦！

vue+node.js前后端交互中的token令牌验证相关推荐

Ajax+Node.js前后端交互最佳入门实践(01)
1.Node.js简介 1.0.前后台数据交互流程在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...
Ajax+Node.js前后端交互最佳入门实践(05)
5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用数据交互,可以从服务器获取 ...
Ajax+Node.js前后端交互最佳入门实践(04)
4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...
Vue2+Node.js前后端分离项目部署到云服务器
本文参考教程: NodeJS项目部署到阿里云ECS服务器全程详解 - 知乎本文详细介绍如何部署NodeJS项目到阿里云ECS上,以及本人在部署过程中所遇到的问题.坑点和解决办法,可以说是全网最全最详细 ...
前后端交互中，返回前端的自定义响应数据结构
在前后端交互分离的体系下,我们后端一般会将返回给前端的信息数据进行格式的统一,然后返回前端json串:,一下我提供了一个模板,在实际开发中可进行参考 package com.project.util; ...
【项目实战】mybatis +vue.js 前后端交互批量删除
单个删除功能已经实现了,批量删除弄了很久也没弄好,来试一下.弄了很久终于把批量删除实现了! 结果: 点击确认后,将看见表中已经少了两条数据. 实现的关键是:1.正确传递数据给后端的js语句 2.后端接 ...
java前后端分离账号错误_前后端分离，获取token，验证登陆是否失效
public classJwtUtils {/*** 密钥*/ private static final String SECRET="xxxx";/*** 默认字段key:exp ...
前后端分离项目token怎么验证_前后端分离，获取token，验证登陆是否失效
public classJwtUtils {/*** 密钥*/ private static final String SECRET="xxxx";/*** 默认字段key:exp ...
前后端交互，密码加密，RSA 实现前端 js 加密，后端 go 解密
RSA 加密算法简介一种比较常见的非对称加密算法,常用于前后端交互中的密码加密,前端使用公钥加密密码,后端使用私钥进行解密.公钥可对外开放,私钥是存放在服务端,外部正常情况下是拿不到解密私钥的. 以 ...