本篇文章适合有node基础的同学们哦！这篇文章记录了做的仿卖座电影的一个登录功能
我用到的技术
- express（基于node的后端）
- 数据库（我用的是Wampserver64）
- vue2 （前端）
- axios
- mysql2
- jsonwebtoken
创建后台项目
express --view=ejs nodeApp下载依赖
npm i测试能否成功访问
开启本地服务器：
node ./bin/www创建数据库
打开Wampserver64, 如果是绿色则启动成功
后端根目录下载mysql2
npm i mysql2前端下载axios
npm i axios后端路由
var express = require('express');
const mysql2 = require('mysql2')
var router = express.Router();
/* GET home page. */
router.post('/login',async function(req, res){
a='users'
// 创建连接池
const config=handleConfig()
const promisePool=mysql2.createPool(config).promise()
let users=await promisePool.query(`SELECT * FROM ${a} WHERE name='${req.body.username}' AND password='${req.body.password}'`) //sql语句
console.log(users[0])
if(users[0].length){
res.send({ok:1})
}else{
res.send({ok:0})
}
})
module.exports = router;
// 连接数据库的基本配置
function handleConfig(){
return{
host:'localhost',
port:3306,
user:"root",
password:"",
database:"maizuo",
connectLimit:1
}
}express设置跨域
//设置允许跨域访问该服务.
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', '*');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});前端请求代码
axios.post('http://localhost:3000/login',{
username:values.username,
password:values.password
}).then(res=>{
console.log(res.data)
}).catch(err=>{
console.log(err)
})到这里就完成最基本的登录鉴权了，接下来进入主题
下载jsonwebtoken
npm i jsonwebtoken导入
const jwt = require('jsonwebtoken')创建一个公共js文件
此文件用来存放jsonwebtoken的加密与解密函数
const { json } = require('express')
const jwt = require('jsonwebtoken')
const key = 'maizuoc312asdpkj' //秘钥
const obj={
// 加密
sign: function(data,time){
const token=jwt.sign(data, key, { expiresIn: time })
return token
},
verify: function(token){
try {
return jwt.verify(token, key)
} catch (error) {
return false
}
}
}
module.exports=obj更改express的路由
router.post('/login',async function(req, res){
a='users'
// 创建连接池
const config=handleConfig()
const promisePool=mysql2.createPool(config).promise()
let users=await promisePool.query(`SELECT * FROM ${a} WHERE name='${req.body.username}' AND password='${req.body.password}'`) //sql语句
if(users[0].length){
mony=users[0][0].mony
name=users[0][0].name
// 将token放在header中
const token=jwtObj.sign(users[0][0],'1h')
res.header('Autorization', token)
res.send({
ok:1
})
}else{
res.send({ok:0})
}
})使用axios拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});到这里会发现可能拿不到自定义头部
在设置跨越那里加上
res.header('Access-Control-Expose-Headers', 'Autorization');意思就是允许头部信息Autorization的显示
拿到头部并保存本地
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
const autorization = response.headers.autorization
autorization && localStorage.setItem('token',autorization)
return response
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});每次向后端请求都带上token
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
const token=localStorage.getItem('token')
config.headers.Authorization = `Bearer ${token}`
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});后端进行接收前端发过来的token进行校验
const examineToken = jwtObj.verify(req.headers.authorization.split(' ')[1])然后就可以对校验的结果进行自己相关的逻辑处理
总结
就是前端输入登录账号与密码，后端进行判断，如果成功，就向前端通过header发送token的值
前端接收到token后就存在本地，然后每次向后端发送请求时就带上这个token，后端进行校验后
返回值给前端，前端根据后端返回的值再进行业务逻辑的一个处理