本文主要是介绍前后端分离(蜗牛学苑05)-上传图片前后端处理，图片预览，数据库保存图片数据，数据加密，md5、bcypt加密，认证流程，生成token，前端请求携带token,token配置，认证后处理，统一处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、图片上传前端处理
1、index.html
<div><label>上传头像</label><input type="file" id="upload"></div><div class="imag-box"><!-- 显示图片预览 --><img src="" alt=""/></div><div><button id="addStudent">确认新增</button></div>
//图片上传$('#upload').change(function () {//1、选中图片的相关信息//console.log(this)const files=this.files//2、处理图片信息，添加到表单对象formData中，这是原生js提供的const formData=new FormData()//formData的append方法添加formData对象，有两个参数，第一个是自定义的文件名，第二个是图片信息formData.append('file',files[0])//3、通过ajax将文件发送出去，实际应该是formData发送出去$.ajax({url:'/images/upload',type:'POST',data:formData,//cache:是否读取缓存中的结果，cache:false,//数据编码格式是否适用jquery方法contentType:false,//发送的图片数据是否转换为其他格式processData:false,success(msg){console.log(msg)}})})
2、图片上传后端处理
需安装multer文件上传插件
npm i multer
1、为上传按钮的change事件添加逻辑
//图片上传$('#upload').change(function () {//1、选中图片的相关信息//console.log(this)const files=this.files//2、处理图片信息，添加到表单对象formData中，这是原生js提供的const formData=new FormData()//formData的append方法添加formData对象，有两个参数，第一个是自定义的文件名，第二个是图片信息formData.append('file',files[0])//3、通过ajax将文件发送出去，实际应该是formData发送出去$.ajax({url:'/images/upload',type:'POST',data:formData,//cache:是否读取缓存中的结果，cache:false,//数据编码格式是否适用jquery方法contentType:false,//发送的图片数据是否转换为其他格式processData:false,success(msg){console.log(msg)}})})
2、在app.js里添加一级路由
const imagesRouter=require('./routes/images')app.use('/images', imagesRouter)3、在routes里添加images路由
var express = require('express');
var router = express.Router();//引入文件上传插件
const { uploadFiles }=require('../utils/handleFiles')router.post('/upload', async function(req, res, next) {//这里返回的upload依然还是一个方法const upload=uploadFiles({//设置上传成功后的图片存储路径path:'./public/images',//和前端传来的fromData的第一个参数需要一致，也就是‘file’（formData.append('file',files[0])）key:'file',//上传图像大小限制单位是kbsize:1000})upload(req,res,function (err) {if (err){console.log('图片上传失败')}else{console.log('图片上传成功',req.files)}})});module.exports = router;
4、建立一个utlis目录，创建第三方编写好的handleFile.js，里面exports出四个文件操作方法
handleFile.js
// 文件上传 npm i multer
const multer = require('multer');
const fs = require('fs');
const path = require('path');/*** 文件上传* 参数说明：接收一个 options 对象作为参数，该对象包含三个属性* - path：图片上传路径* - key：与前端 formData 对象的 fieldname 相匹配（即 formData.append()方法的第一个参数）* - size: 设置图片最大限制，单位 kb*/
function uploadFiles(options = {}) {// 1. 对参数 options 进行解构并设置默认值const { path = "./public/temp", key = "file", size = 1000 } = options;// 2. 设置 multer 的参数，配置 diskStorage，来控制文件存储的位置以及文件名字等const storage = multer.diskStorage({// 2.1 确定图片存储的位置destination: function (req, file, cb) {// 当 path 所对应目录不存在时，则自动创建该文件try {fs.accessSync(path);} catch (error) {fs.mkdirSync(path);}cb(null, path);},// 2.2 确定图片存储时的名字。（注意：如果使用原名，可能会造成再次上传同一张图片的时候的冲突）filename: function (req, file, cb) {var changedName = new Date().getTime() + '-' + file.originalname;cb(null, changedName);}});// 3. 配置图片限制const limits = {// 限制文件大小 1000 kbfileSize: 1024 * size,// 限制文件数量files: 10};// 4.生成的专门处理上传的一个工具，可以传入 storage、limits 等配置const upload = multer({ storage, limits });// 5. 返回多文件上传的设置信息（同样可用于单文件上传）return upload.array(key);
}
/*** 文件移动* 参数说明：接收一个 options 对象作为参数，该对象包含三个属性* - fromPath：文件原路径* - toPath：文件新路径* - filename：文件名*/
function moveFiles({ fromPath, toPath, filename } = {}) {if (!filename) {console.log('文件移动失败：filename 文件名不能为空');return;}// 要移动的文件的原路径const sourceFile = path.join(fromPath, filename);// 判断源文件是否存在try {fs.accessSync(sourceFile);} catch (error) {console.log('文件移动失败：' + sourceFile + ' 该文件不存在。');return;}// 判断文件要移动的新路径是否存在，如果不存在，则创建try {fs.accessSync(toPath);} catch (error) {fs.mkdirSync(toPath);}// 文件移动后的新路径const newFile = path.join(toPath, filename);fs.renameSync(sourceFile, newFile);
}/*** 删除文件* 参数说明：该函数接收一个路径字符串作为参数，传递的路径即为要删除的文件路径**/function deleteFiles(dir) {// 判断 dir 是否存在try {fs.accessSync(dir);} catch (error) {console.log(dir + ' 该路径不存在。');return;}try {// 判断 dir 是文件还是文件夹const stats = fs.statSync(dir);if (stats.isFile()) {fs.unlinkSync(dir);}if (stats.isDirectory()) {// 判断该文件是否为空const files = fs.readdirSync(dir);files.forEach(item => {deleteFiles(path.join(dir, item));});// 删除空文件夹fs.rmdirSync(dir);}} catch (error) {console.log('文件删除失败：');console.log(error);}
}
function copyFiles(oldPath, newPath) {// 判断 oldPath 是否存在try {fs.accessSync(oldPath);// 判断路径是文件还是文件夹const stats = fs.statSync(oldPath);if (stats.isFile()) {// 读取 源文件的内容const data = fs.readFileSync(oldPath, 'utf-8');// 将读取的内容追加到新文件中fs.appendFileSync(newPath, '\n' + data);}if (stats.isDirectory()) {console.log(oldPath, '该路径不是文件名');}} catch (error) {console.log(oldPath, '该路径不存在');}}
module.exports = {uploadFiles, moveFiles, deleteFiles,copyFiles
}5、目录结构为
3、图片上传成功后的预览
1、images.js中的路由中设置上传成功后的业务逻辑
router.post('/upload', async function(req, res, next) {//这里返回的upload依然还是一个方法const upload=uploadFiles({//设置上传成功后的图片存储路径path:'./public/images',//和前端传来的fromData的第一个参数需要一致，也就是‘file’（formData.append('file',files[0])）key:'file',//上传图像大小限制单位是kbsize:1000})upload(req,res,function (err) {if (err){console.log('图片上传失败')}else{console.log('图片上传成功',req.files)res.send({message:'图片上传成功',status:1,data:req.files[0].filename})}})});2、index.html中ajax处理回传数据并预览在页面中
//图片上传$('#upload').change(function () {//1、选中图片的相关信息//console.log(this)const files=this.files//2、处理图片信息，添加到表单对象formData中，这是原生js提供的const formData=new FormData()//formData的append方法添加formData对象，有两个参数，第一个是自定义的文件名，第二个是图片信息formData.append('file',files[0])//3、通过ajax将文件发送出去，实际应该是formData发送出去$.ajax({url:'/images/upload',type:'POST',data:formData,//cache:是否读取缓存中的结果，cache:false,//数据编码格式是否适用jquery方法contentType:false,//发送的图片数据是否转换为其他格式processData:false,success(msg){if (msg.status){$('#students-images').attr('src',`./images/${msg.data}`)}}})})
4、数据库保存学生图片数据
1、index.html新增学生里面添加imagename的内容
//新增学生$('#addStudent').click(function(){const name=$('#addStudentsName').val()const age=$('#addStudentsAge').val()const gender=$('[name=addStudentsGender]:checked').val()const classId=$('#selectClasses').val()const imageName=$('#students-images').data('src')//console.log(imageName)//console.log(name,age,gender)$.ajax({url:'/students/addStudents',type:'POST',data:{name,age,gender,classId,imageName},success(msg){if (msg.status){getStudents()}}})})2、studentsModel里添加对于imageName的描述
//数据集合的相关配置
//1、定义数据集合的结构：定义集合中数据有哪些属性，属性的值是什么类型（数据库结构）
//解构出mongoose的Schema方法来，这个方法用来操作集合的
const { Schema,model }=require('mongoose')
//通过构造函数创建集合的结构
const studentsSchema=new Schema({name:String,age:String,gender:String,imageName:String,//用于关联classes集合classId:{type:Schema.Types.ObjectId,//ref用于设置要关联的集合的模型名称ref:'classesModel'}
},{versionKey:false})//2、定义数据集合的模型：将schema和数据库中的集合关联起来
//model需要三个参数：模型名称，schema名称，数据库中的集合名称
const studentsModel=model('studentsModel',studentsSchema,'students')//向第三层dao层暴露model数据
module.exports.studentsModel=studentsModel3、mongodb中发现students集合中文档多了一个imageName属性
5、学生列表渲染图片
||或运算符，如果符号前为真，则使用符号前面的值，如果为假使用后面的值
<img width="80" src="./images/${item.imageName || 'default.jpg'}" alt="">
index.html中getstudents（）函数进行改造
//获取全部学生function getStudents(){$.ajax({url:'/students/getStudents',data: {currentPage: data.currentPage,pageSize:data.pageSize,searchValue: data.searchValue,searchType: data.searchType},type:'GET',success(msg){//进入if表示进入学生数据成功if(msg.status){data={...data,...msg.data}console.log(msg.data)//渲染数据const str=msg.data.students.map(function (item,index) {return `<tr><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td><td>${item.classId.name}</td><td>${item.classId.teachersId.map(item=>`<p>${item.name}</p>`).join('')}</td><td><img width="80" src="./images/${item.imageName || 'default.jpg'}" alt=""></td><td><button class="updateBtn" data-id="${item._id}">修改</button><button class="removeBtn" data-id="${item._id}">删除</button></td></tr>`}).join('')//join是拼接$('tbody').html(str)//渲染下分页指示$('#currentPage').text(data.currentPage)$('#pages').text(data.pages)$('#total').text(data.total)}}})}
6、多余图片的处理
删除public/images下面没有被数据库所使用的图片，其实应该在点击上传文件的时候，图片不能直接上传，只能作为零临时文件。
1、index.html修改上传文件路径为temp
//图片上传$('#upload').change(function () {//1、选中图片的相关信息//console.log(this)const files=this.files//2、处理图片信息，添加到表单对象formData中，这是原生js提供的const formData=new FormData()//formData的append方法添加formData对象，有两个参数，第一个是自定义的文件名，第二个是图片信息formData.append('file',files[0])//3、通过ajax将文件发送出去，实际应该是formData发送出去$.ajax({url:'/images/upload',type:'POST',data:formData,//cache:是否读取缓存中的结果，cache:false,//数据编码格式是否适用jquery方法contentType:false,//发送的图片数据是否转换为其他格式processData:false,success(msg){if (msg.status){$('#students-images').attr('src',`./temp/${msg.data}`).data('src',msg.data)//创建自定义属性，这里相当于创建了一个data-src属性，并将msg.data图片路径保存在data-src属性中}}})})
2、students.js路由中使用moveFiles和deleteFiles函数对temp和images两个目录中的文件进行操作
var express = require('express');
var router = express.Router();//引入第二层的getStudents方法
const {getStudents,addStudents,deleteStudents,getStudentsById,updateStudents}=require('../service/studentsServices')//引入文件处理模块
const {moveFiles,deleteFiles}=require('../utils/handleFiles')//获取所有数据，及查询
router.get('/getStudents', async function(req, res, next) {//console.log('第一层的模糊查询：',req.query)const data=await getStudents(req.query)res.send(data)});//删除学生
router.post('/deleteStudents', async function(req, res, next) {const data=await deleteStudents(req.body)res.send(data)});//新增学生
router.post('/addStudents', async function(req, res, next) {const data=await addStudents(req.body)if (data.status && req.body.imageName){moveFiles({fromPath:'./public/temp',toPath:'./public/images',filename:req.body.imageName})deleteFiles('./public/temp')//直接把文件夹给删除了}res.send(data)
});//获取一个学生
router.get('/getStudentsById', async function(req, res, next) {const data=await getStudentsById(req.query)res.send(data)
});//确认修改一个学生
router.post('/updateStudents', async function(req, res, next) {const data=await updateStudents(req.body)res.send(data)
});
module.exports = router;7、删除分页的优化处理
对删除按钮委托函数进行逻辑优化
核心是删除最后一个数据，且该页只有一个数据，删除后页码需要向前跳动一个
index.html
//删除按钮使用事件委托//on做委托，委托给父级的静态元素，第一个参数是事件，第二个参数是真正执行的那个标签（委托人），第三个参数是具体的工作$('tbody').on('click','.removeBtn',function(){//获取当前点击的这个按钮对应的id,data('id')是获取所有（特定）属性的函数,这里的id实际就是data-id，前面加data-是一种约定俗成const _id=$(this).data('id')console.log(_id)$.ajax({url:'/students/deleteStudents',type:'post',data: { _id },success (msg) {if (msg.status){alert('删除成功')//data.currentPage=1//如果删除最后一条if (data.students.length==1){//当前页要往前退一个data.currentPage--}//重新发一次ajax请求getStudents()}}})})
8、数据加密
1、可逆
2、不可逆
2.1有规律md5
2.2无规律bcrypt
utils/crypto.js
// crypto.jsconst crypto = require("crypto"); // Node.js 中内置该模块，不用下载/*** @md5加密模块 (加密固定,不可逆)* @param str string 要加密的字符串* @param secret string 要使用的加密密钥* @retrun string 加密后的字符串* */
module.exports.getMd5 = function (str, secret = '9vApxLk5G3PAsJrM') {const md5 = crypto.createHash('md5');return md5.update(str + secret).digest('hex');
}
/*** @aes128加密模块* @param str string 要加密的字符串* @param secret string 要使用的加密密钥(要记住,不然就解不了密啦)* @retrun string 加密后的字符串*/
module.exports.getEncAse128 = function (str, secret = '9vApxLk5G3PAsJrM', iv = 'FnJL7EDzjqWjcaY9') {const cipheriv = crypto.createCipheriv('aes-128-cbc', secret, iv);var enc = cipheriv.update(str, "utf8", "hex"); //编码方式从utf-8转为hex;enc += cipheriv.final("hex"); //编码方式从转为hex;return enc; //返回加密后的字符串
}
/*** @aes128解密模块* @param str string 要解密的字符串* @param secret string 要使用的解密密钥(要和密码的加密密钥对应,不然就解不了密啦)* @retrun string 解密后的字符串* */
module.exports.getDecAse128 = function (str, secret = '9vApxLk5G3PAsJrM', iv = 'FnJL7EDzjqWjcaY9') {var decipheriv = crypto.createDecipheriv("aes-128-cbc", secret, iv);var dec = decipheriv.update(str, "hex", "utf8");//编码方式从hex转为utf-8;dec += decipheriv.final("utf8");//编码方式从utf-8;return dec;
}/*** @Hmac-sha1加密模块 (每次加密随机,不可逆)* @param str string 要加密的字符串* @param secret string 要使用的加密密钥* @retrun string 加密后的字符串* */
module.exports.getHmac = function (str, secret = '9vApxLk5G3PAsJrM') {var buf = crypto.randomBytes(16);secret = buf.toString("hex");//密钥加密；var Signture = crypto.createHmac("sha1", secret);//定义加密方式Signture.update(str);var miwen = Signture.digest().toString("base64");//生成的密文后将再次作为明文再通过pbkdf2算法迭代加密；return miwen;
}
/*** @sha1加密模块 (加密固定,不可逆)* @param str string 要加密的字符串* @retrun string 加密后的字符串* */
module.exports.getSha1 = function (str) {var sha1 = crypto.createHash("sha1");//定义加密方式:md5不可逆,此处的md5可以换成任意hash加密的方法名称；sha1.update(str);var res = sha1.digest("hex"); //加密后的值dreturn res;
}
9、md5加密登录注册
修改uers.js的传值，注册传值过程中直接加密，登录是也同样加密，注册时，密码直接以加密后的形式存储在数据库中
uers.js
const express = require('express')
const router = express.Router()
// //模拟数据库
// const users = [
// { username: 'zhangsan', password: 123 },
// { username: 'lisi', password: 456 },
// ]const {getMd5}=require('../utils/crypto')//引入服务层的方法
const { login,isAcces,register } = require('../service/usersServices')
//登录路由数据库版本
router.post('/login', async function (req, res, next) {//接受到前端发送的用户数据const { username,password } = req.bodyconst newPassword=getMd5(password)const data = await login({username,password:newPassword})res.send(data)})/* GET users listing. */
router.get('/', function (req, res, next) {res.send('respond with a resource')
})
//设置二级路由//注册路由
router.post('/register', async function (req, res, next) {const { username,password } = req.body//注册阶段在这里加密const newPassword=getMd5(password)//console.log('加密后的密码',newPassword)const data=await register({username,password:newPassword})res.send(data)})
//验证用户名是否存在路由
router.post('/isAccess', async function (req, res, next) {const { username } = req.bodyconst data=await isAcces(username)res.send(data)})module.exports = router10、bcypt加密登录注册
bcypt模块下载安装，貌似内置模块不用下载
npm install bcrypt
注册模块用bcypt的hashSync（）加密，登录模块从数据库读用户的密码字段，然后用compareSync（）去和当前登录密码比较
const express = require('express')
const router = express.Router()const {getMd5}=require('../utils/crypto')
const bcrypt = require("bcryptjs");//引入服务层的方法
const { login,isAcces,register } = require('../service/usersServices')
//登录路由数据库版本
router.post('/login', async function (req, res, next) {//接受到前端发送的用户数据const { username,password } = req.body//用md5加密//const newPassword=getMd5(password)// const data = await login({username,password:newPassword})// res.send(data)//现密码和数据库里的密码进行比较//const { data } = await login({username})//data[0].password是数据库中加密的密码const isok= bcrypt.compareSync(password,data[0].password)if (isok){res.send({message:'登录成功',status:1,})}else{res.send({message:'登录失败',status:0,})}})/* GET users listing. */
router.get('/', function (req, res, next) {res.send('respond with a resource')
})
//设置二级路由//注册路由
router.post('/register', async function (req, res, next) {const { username,password } = req.body//注册阶段在这里加密,使用md5加密//const newPassword=getMd5(password)//console.log('加密后的密码',newPassword)//第二个参数是加密强度，用10就很好const newPassword=bcrypt.hashSync(password,10)console.log('加密密码：',newPassword)const data=await register({username,password:newPassword})res.send(data)})
//验证用户名是否存在路由
router.post('/isAccess', async function (req, res, next) {const { username } = req.bodyconst data=await isAcces(username)res.send(data)})module.exports = router11、身份认证流程
身份验证示意图
身份验证流程
- 前端发送登录请求到后端，后端通过账号密码来判断用户是否登录成功；
- 如果登录成功，后端生成 token，然后将 token 连同“登录成功”的信息一并返回给前端；
- 前端接收到 token 后，将 token 保存在 localStorage 中；
- 后续前端发送的每一个请求，都需要将 token 携带上，一并发送到后端；
- 服务端接收到每一个请求，都需要先对请求中的 token 进行验证，验证通过后，才让该请求发送到对应的表现层中去；
- 如果后端 token 验证没有通过，后端直接返回 401 的报错给前端（请求无法发送到表现层）；
- 如果前端用户要退出登录，直接将 localStorage 中的 token 删除即可；
12、node生成token
下载依赖包
jsonwebtoken：该依赖包用于在服务端生成 token、解码 token；express-jwt：该依赖包用于在服务端验证 token 是否有效；
npm i jsonwebtoken express-jwt --save
1、在user.js中生成token
const express = require('express')
const router = express.Router()
// //模拟数据库
// const users = [
// { username: 'zhangsan', password: 123 },
// { username: 'lisi', password: 456 },
// ]const {getMd5}=require('../utils/crypto')
const bcrypt = require("bcryptjs");
const jwt=require('jsonwebtoken')//引入服务层的方法
const { login,isAcces,register } = require('../service/usersServices')
//登录路由数据库版本
router.post('/login', async function (req, res, next) {//接受到前端发送的用户数据const { username,password } = req.body//用md5加密//const newPassword=getMd5(password)// const data = await login({username,password:newPassword})// res.send(data)//现密码和数据库里的密码进行比较//const { data } = await login({username})//data[0].password是数据库中加密的密码const isok= bcrypt.compareSync(password,data[0].password)if (isok){//生成tokenconst token=jwt.sign({username},//要保存的用户信息'fengray',//秘钥，用来加密混入字符串{expiresIn: 60}//设置token的有效期，单位为秒)res.send({message:'登录成功',status:1,token})}else{res.send({message:'登录失败',status:0,})}})/* GET users listing. */
router.get('/', function (req, res, next) {res.send('respond with a resource')
})
//设置二级路由//注册路由
router.post('/register', async function (req, res, next) {const { username,password } = req.body//注册阶段在这里加密,使用md5加密//const newPassword=getMd5(password)//console.log('加密后的密码',newPassword)//第二个参数是加密强度，用10就很好const newPassword=bcrypt.hashSync(password,10)console.log('加密密码：',newPassword)const data=await register({username,password:newPassword})res.send(data)})
//验证用户名是否存在路由
router.post('/isAccess', async function (req, res, next) {const { username } = req.bodyconst data=await isAcces(username)res.send(data)})module.exports = router2、在login.html中保存token在localStorage中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h2>用户登录</h2><label>用户名</label><input type="text" name="username" id="username"><br/><label>密码</label><input type="text" name="password" id="password"><br/><button id="loginBtn">登录</button><script src="./javascripts/jquery.min.js"></script><script>$('#loginBtn').click(function(){const username=$('#username').val()const password=$('#password').val()$.ajax({//接口url:'/users/login',//前端发送给后端的数据data:{username,password},//请求类型type:'POST',//请求成功后触发success方法，msg用于接收后端响应来的结果success(msg){//console.log(msg.token)if (msg.status){//msg.status取值范围为1和0，对应真和假，非零为真alert('登录成功')//在localStorage中保存localStorage.setItem('token',msg.token)//localStorage.token=msg.token//等效上一句代码}else{alert('登录失败')}}})})</script></body>
</html>13、前端发送请求携带token
请求消息由四部分组成
1、请求头
2、请求行
3、空行
4、请求体
在进入首页时就执行一个isLogin函数，在这个函数里面发送ajax请求，同时设置请求头信息，并在请求头信息里面带上localStorage里存储的token
index.html
//进入到页面的时候就要进行验证用户是否登录isLogin()function isLogin(){$.ajax({url:'/users/isLogin',type:'GET',//请求头信息，放入token信息headers:{//Bearer是token的前缀，必须要有，注意需要有个空格Authorization:'Bearer '+localStorage.token},success(msg){console.log(msg)}})}14、token验证配置
专门配置一个文件来执行验证：utils/jwt.js
1、jwt.js
//定义验证规则
const expressJWT = require('express-jwt')
//执行验证函数const jwtAuth = expressJWT({secret: 'fengray',//使用jwt生成token时填入的秘钥字符串algorithms: ['HS256'],//设置jwt的算法为HS256credentialsRequired: false,//对于没有token的请求不进行解析
}).unless({//用于设置不需要验证token的路径path: ['/users/login','/users/register','/users/isAccess']
})module.exports = jwtAuth2、在app.js中引入这个jwt验证配置
app.js
const jwtAuth=require('./utils/jwt')
//在一级路径之前来进行验证
app.use(jwtAuth)
15、身份认证成功或失败后的处理
index.html中设置验证失败的逻辑
1、index.html
//进入到页面的时候就要进行验证用户是否登录isLogin()function isLogin(){$.ajax({url:'/users/isLogin',type:'GET',//请求头信息，放入token信息headers:{//Bearer是token的前缀，必须要有，注意需要有个空格Authorization:'Bearer '+localStorage.token},success(msg){console.log(msg)},error(err){if (err.status==401){alert('您尚未登录，请先登录')location.href='./login.html'}}})}在user.js中设置访问路由的逻辑，
2user.js
//验证是否登录
router.get('/isLogin', async function (req, res, next) {//获取tokenconst headersToken=req.get('Authorization')const token = headersToken.split(' ')[1]//console.log(token)// 并解码token并拿到用户信息,需要传入生成token是设定的秘钥字符串const { username }=jwt.verify(token,'fengray')//console.log(username)res.send({message:'身份验证通过',status:1,data:username})})
16、ajax的统一处理
几乎所有的请求都应当带token因此，直接对ajax进行统一设置
index.html
这段代码写在script的最开头
//批量给ajax设置请求头// $.ajaxSettings.beforeSend=function(xhr,requst){// //给xhr设置请求头// xhr.setRequestHeader('Authorization','Bearer '+localStorage.token)// }//批量给ajax设置错误处理$.ajaxSetup({headers:{//Bearer是token的前缀，必须要有，注意需要有个空格Authorization:'Bearer '+localStorage.token},error(err){if (err.status==401){alert('您尚未登录，请先登录')location.href='./login.html'}}})
这篇关于前后端分离(蜗牛学苑05)-上传图片前后端处理，图片预览，数据库保存图片数据，数据加密，md5、bcypt加密，认证流程，生成token，前端请求携带token,token配置，认证后处理，统一处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
