JWT登录验证前后端设计与实现笔记

设计内容

前端

  1. 配置全局前置路由守卫
  2. axios拦截器
  3. 登录页面和主页

后端

  1. JWT的封装
  2. 登录接口
  3. 中间件放行
  4. mysql数据库的连接
    在这里插入图片描述

详细设计

路由设计

配置全局前置守卫,如果访问的是登录页面则放行,不是则进入判断是否有token,没有则拦截回到登录页面,有则放行访问。

router.beforeEach((to, from, next) => {//如果是访问Login,则直接通过if(to.name==='Login'){next();}else{//如果没有token则进入登录页面if(!localStorage.getItem("token")){next({path:'/login'});}else{next();}}
});

axios拦截器

配置响应拦截器,拿到后端传来的token并保存到localStorage中,如果后端传回来了401错误(token失效),就会删除localStorage中的token并回到登录页面。

// 响应拦截
axios.interceptors.response.use(function (response) {//拿到响应里的tokenconsole.log(response);const authorization  = response.data.token;console.log(authorization);authorization && localStorage.setItem("token",authorization);return response;}, function (error) {const { status } = error.response;if(status===401){localStorage.removeItem("token");router.push("/login");}return Promise.reject(error);});

配置请求拦截器,把localStorage中的token加到请求头中的Authorization中。

//请求拦截
axios.interceptors.request.use(function (config) {const token = localStorage.getItem("token");//请求时带上token,给后端认证config.headers.Authorization = `${token}`;return config;}, function (error) {return Promise.reject(error);});

登录页面和主页

在这里插入图片描述
登录方法写得比较简单,请求登录接口,判断后端返回的结果。

LoginHandle(){if(this.loginForm.password || this.loginForm.username){axios.post("http://localhost:3000/login",this.loginForm).then(res=>{if(res.data.status == "success"){this.$router.push("/mainbox");}else{ElMessage.error('用户名或密码错误!');}})}else{ElMessage.error('请填写账号和密码!');}
}

访问主页时会请求后端的接口,主页请求时所携带的token给后端处理,后端会判断 token是否过期,如果过期后端就回应401错误码,401错误码被axios的响应拦截器处理,跳回登录页面。

mounted(){this.getIndex();
},
methods:{getIndex(){axios.get('http://localhost:3000/bill').then(res=>{console.log(res.data);})}
}

JWT封装

JWT是JSON Web Token的缩写,jsonwebtoken这个模块有两个常用的方法,sign()和verify()作用分别是生成token和验证token,sign()方法需要3个基本的参数,1.加密内容,2.密钥,3.过期时间。verify()方法有2个基本参数,1.加密内容,2.密钥。

const jwt = require("jsonwebtoken");
const secret = "samrol";
const JWT = {generate(value,expires){return jwt.sign(value,secret,{expiresIn:expires});},verify(token){try{return jwt.verify(token,secret);}catch(error){return false;}}
}
module.exports = JWT;

登录接口

访问/login时后端会做:拿到前端请求带过来的账户和密码,连接数据库,查询登录信息是否正确,不正确则回应登录错误给前端,信息正确:生成token,把token添加到header的Authorization里,返回成功信息。

const express = require("express");
const router = express.Router();
const mysql2 = require("mysql2");
const JWT = require("../util/JWT");
const getDBConfig = require("../util/mysql");router.post("/",async (req,res)=>{const {username,password} = req.body;const config = getDBConfig();const promisePool = mysql2.createPool(config).promise();var user = await promisePool.query(`select * from user where name=? and password=?`,[username,password]);//登陆成功if(user[0].length>0){//生成tokenconst token = JWT.generate({username,password},"10s");//设置头部res.header("Authorization",token);res.send({status:"success",message:"登录成功",token});}else{res.send({status:"error",message:"用户名或密码错误"});}
})module.exports = router;

补充一个数据库连接配置

function getDBConfig(){return{host:'127.0.0.1',port:3306,user:'root',	password:'',database:'vue_test',}
}module.exports = getDBConfig;

接口拦截中间键

接收到的每次请求都需要通过这个中间件,如果是login接口则直接放行,其他的则需要通过验证前端携带的token是否过期来判断能否放行,如果过期则返回401错误码来提醒用户token过期需要重新登录。

app.use((req,res,next)=>{if(req.url==="/login"){next();return;}const token = req.headers['authorization']//.split(" ")[1];if(token){var payload = JWT.verify(token);if(JWT.verify(token)){const newToken = JWT.generate({username:payload.username,password:payload.password,},"10s");res.header("Authorization",newToken);next();}else{res.status(401).send({errCode:"-1",errorInfo:"token过期!"});}}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/686941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《Go 简易速速上手小册》第10章:微服务与云原生应用(2024 最新版)

文章目录 10.1 构建微服务架构 - 探索 Go 语言的微观世界10.1.1 基础知识讲解10.1.2 重点案例:订单处理系统订单服务测试服务 10.1.3 拓展案例 1:用户认证服务安装所需的包实现用户模型和存储实现 JWT 生成和验证实现认证服务测试服务 10.1.4 拓展案例 2…

使用函数实现数组操作

使用函数实现数组操作 创建一个整形数组,完成对数组的操作 实现函数init() 初始化数组为全0 实现print() 打印数组的每个元素 实现reverse() 函数完成数组元素的逆置。 要求:自己设计以上函数的参数,返回值。 void Init(int arr[], int sz…

HarmonyOS—@State装饰器:组件内状态

State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。 在状态变量相关装饰器中,State是最基础的,使变量拥有状态属性的装饰器&a…

基于python+django+mysql的小区物业管理系统

该系统是基于pythondjango开发的小区物业管理系统。适用场景:大学生、课程作业、毕业设计。学习过程中,如遇问题可以在github给作者留言。主要功能有:业主管理、报修管理、停车管理、资产管理、小区管理、用户管理、日志管理、系统信息。 演示…

mybatis整合plugin处理

1、注入SqlSessionFatory时候会初始化所有拦截器,2、发生在handle时期,将plugin加入到org.apache.ibatis.plugin.InterceptorChain的链路当中,3、method invoke方法执行拦截器中的拦截方法 (比如myabatis plus 里面的分库分表&…

SpringBoot RabbitMQ收发消息、配置及原理

今天分析SpringBoot通过自动配置集成RabbitMQ的原理以及使用。 AMQP概念 RabbitMQ是基于AMQP协议的message broker,所以我们首先要对AMQP做一个简单的了解。 AMQP (Advanced Message Queuing Protocol) is a messaging protocol that enables conforming client a…

深入理解Selenium:常用方法和操作详解

前言 大家好,我是chowley,今天来复习一下Selenium的常用方法,并结合实战演练来加深记忆。 Selenium Selenium 是软件测试领域中最受欢迎的自动化测试工具之一,它提供了丰富的方法和操作来模拟用户在 Web 应用程序中的交互行为。…

OpenAI发布首个视频生成模型Sora:输文字即可出视频现实还存在吗?

就在刚刚,openai发布了全新的视频生成人工智能模型Sora。用户只要通过文字输入一些提示语,就可以得到一个高清视频。同时Sora还可以根据静态图像生成相关的视频剪辑,效果相当炸裂。 这下又要干倒一大片创业公司了 Sora官方网址 Sora 目前…

codeforces round 926 div2(A-D)

1.A a题 ∑ i 2 n ( a i − a i − 1 ) \sum_{i2}^{n}(a_{i}-a_{i-1}) ∑i2n​(ai​−ai−1​) a n − a 1 a_{n}-a_{1} an​−a1​所以我们排一下序输出 a n − a 1 a_{n}-a_{1} an​−a1​即可,当然直接累加也可以 #include<bits/stdc.h> using namespace std; #def…

【矩阵】重塑矩阵

每日一道算法题之重塑矩阵 一、题目描述二、思路三、C代码 一、题目描述 题目来源&#xff1a;LeetCode 在 MATLAB 中&#xff0c;有一个非常有用的函数 reshape &#xff0c;它可以将一个 m x n 矩阵重塑为另一个大小不同&#xff08;p x q&#xff09;的新矩阵&#xff0c;但…

(三十九)大数据实战——Prometheus监控平台的部署搭建

前言 Prometheus监控&#xff08;Prometheus Monitoring&#xff09;是一种开源的系统监控和警报工具。它最初由SoundCloud开发并于2012年发布&#xff0c;并在2016年加入了云原生计算基金会&#xff08;CNCF&#xff09;。Prometheus监控旨在收集、存储和查询各种指标数据&am…

17.3.2.7 二值化(内存处理)

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 二值化的算法请参看第17.3.1.5节。17.3.1.5 二值化&#xff08;黑白&#xff09;-CSDN博客 【例 17.48】二值化算法一。 //黑白1pr…

GEE使用 Sentinel-1 SAR影像 和 Otsu 方法绘制洪水地图

洪水是世界上最常见、破坏性最大的自然灾害之一,造成了巨大的生命和财产损失。此外,随着气候变化的影响,近年来,洪灾变得更加频繁和不可预测。为了最大限度地减少生命和财产损失,必须迅速发现洪水蔓延的情况,并及时采取必要的干预措施。洪水蔓延探测大多使用光学传感器或…

C++参悟:内存管理 shared_ptr

内存管理 shared_ptr 一、概述二、成员函数1. 构造函数2. 析构函数3. 修改器1. reset2. swap 4. 观察器1. get2. use_count3. operator bool 一、概述 std::shared_ptr 是通过指针保持对象共享所有权的智能指针。多个 shared_ptr 对象可占有同一对象。下列情况之一出现时销毁对…

大模型基础架构入门

大模型架构 Prefix Decoder 和 Causal Decoder 和 Encoder-Decoder 区别 在于 attention mask不同&#xff1a; https://zhuanlan.zhihu.com/p/626310493 为何现在的大模型大部分是Decoder only结构&#xff1f; https://www.zhihu.com/question/588325646/answer/335725261…

代码随想录算法训练营第四十四天 | 518. 零钱兑换 II、377. 组合总和 Ⅳ

题目链接&#xff1a;518. 零钱兑换 II 文章讲解&#xff1a;代码随想录 518. 零钱兑换 II讲解 视频讲解&#xff1a;装满背包有多少种方法&#xff1f;组合与排列有讲究&#xff01;| LeetCode&#xff1a;518.零钱兑换II 思路和解法 题目&#xff1a; 给你一个整数数组 c…

JVM-JVM中对象的结构

对象内存布局 对象里的三个区&#xff1a; 对象头&#xff08;Header&#xff09;&#xff1a;Java对象头占8byte。如果是数组则占12byte。因为JVM里数组size需要使用4byte存储。 标记字段MarkWord&#xff1a; 用于存储对象自身的运行时数据&#xff0c;它是synchronized实现轻…

STM32——OLED菜单

文章目录 一.补充二. 二级菜单代码 简介&#xff1a;首先在我的51 I2C里面有OLED详细讲解&#xff0c;本期代码从51OLED基础上移植过来的&#xff0c;可以先看完那篇文章&#xff0c;在看这个&#xff0c;然后按键我是用的定时器扫描不会堵塞程序,可以翻开我的文章有单独的定时…

[2024]常用的conda指令

[2024]常用的conda指令 Hi&#xff0c;各位新年好&#xff0c;今天给大家介绍一下Python项目开发中常用的工具-Anaconda。 Anaconda指的是一个开源的Python发行版本&#xff0c;也是一个安装、管理Python相关包的软件。它自带了Python、Jupyter Notebook、Spyder等工具&#x…

MIPS指令集处理器设计(支持64条汇编指令)

一、题目背景和意义 二、国内外研究现状 (略) 三、MIPS指令集处理器设计与实现 (一).MIPS指令集功能性梳理 1.MIPS指令集架构 (1).mips基础指令集格式总结 MIPS是&#xff08;Microcomputer without interlocked pipeline stages&#xff09;[10]的缩写&#xff0c;含义是…