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

这篇具有很好参考价值的文章主要介绍了JWT登录验证前后端设计与实现笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

设计内容

前端

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

后端

  1. JWT的封装
  2. 登录接口
  3. 中间件放行
  4. mysql数据库的连接
    JWT登录验证前后端设计与实现笔记,前端记录册,笔记,javascript,前端,jsonwebtoken,html5,vue.js

详细设计

路由设计

配置全局前置守卫,如果访问的是登录页面则放行,不是则进入判断是否有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) {
   //拿到响应里的token
   console.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);
 });

登录页面和主页

JWT登录验证前后端设计与实现笔记,前端记录册,笔记,javascript,前端,jsonwebtoken,html5,vue.js
登录方法写得比较简单,请求登录接口,判断后端返回的结果。

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){
      //生成token
      const 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过期需要重新登录。文章来源地址https://www.toymoban.com/news/detail-833991.html

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过期!"});
      }
   }
})

到了这里,关于JWT登录验证前后端设计与实现笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringSecurity+JWT前后端分离架构登录认证

    目录 1. 数据库设计 2. 代码设计 登录认证过滤器 认证成功处理器AuthenticationSuccessHandler 认证失败处理器AuthenticationFailureHandler AuthenticationEntryPoint配置 AccessDeniedHandler配置 UserDetailsService配置 Token校验过滤器 登录认证过滤器接口配置 Spring Security全局配置 util包 测试结果   在Spri

    2024年01月21日
    浏览(66)
  • Springboot整合JWT完成验证登录

    这个Java类是一个工具类,用于生成和验证JSON Web Tokens(JWT)。JWT是一种开放标准(RFC 7519),它定义了一种紧凑且自包含的方式,用于在各方之间作为JSON对象安全地传输信息。这个信息可以被验证和信任,因为它是数字签名的。在这个例子中,使用了Java的jsonwebtoken库。 下面

    2024年02月09日
    浏览(45)
  • php使用jwt作登录验证

    1 在项目根目录下,安装jwt 2 在登录控制器中加入生成token的代码  可以看到返回token 3  创建一个checkToken类进行解密  所有需要登录操作的接口,都继承这个类  在前端请求拦截器中,将获得的token设置为请求头  即可看到打印出来了用户id

    2024年02月09日
    浏览(38)
  • vue前端实现登录时加验证码

    vue移动端(PC端)图形验证码 vue2-verify 地址:vue2-verify的npmjs地址 安装使用: 支持的验证码类型: 常规验证码picture 常规的验证码由数字和字母构成,用户输入不区分大小写,可变形成汉字验证。 运算验证码compute 运算验证码主要通过给出数字的加减乘运算,填写运算结果进

    2024年02月07日
    浏览(34)
  • SpringBoot整合jwt+redis+随机验证码+Vue的登录功能

    !注意:前端的Vue项目中要引入element-ui和axios # npm安装element-ui、axios npm insatll element-ui -S npm install axios -S # 在main中引入

    2024年02月10日
    浏览(39)
  • ASP.NET CORE WEBAPI 登录 JWT 鉴权 ,接口权限验证

    介绍 当今Web开发中,API的使用越来越广泛,而API的安全性也变得越来越重要。其中,JWT(JSON Web Token)鉴权和授权是一种常见的解决方案。 本篇文章将会介绍JWT鉴权和授权的原理、实现方式以及注意事项。 什么是JWT? JWT是一种基于JSON格式的开放标准(RFC7519),用于在网络

    2023年04月21日
    浏览(66)
  • 爬虫笔记--Selenium实现有验证码网站模拟登录

    代码如下: 一点说明: 安利个巨好用的识别验证码的库 ddddocr gitHub:https://github.com/sml2h3/ddddocr 可能会在版本上遇到问题,我的报错参考这篇文档解决:https://blog.csdn.net/zhuchengchengct/article/details/124854199 我用的版本作为参考:python是3.9.13,ddddocr是1.4.2 如有问题,欢迎大家批评

    2024年02月16日
    浏览(43)
  • 前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》(附完整前后端项目demo)

    微信小程序官方登录流程图: 参考微信小程序登录官网文档 1、前端技术栈 1.1、uniapp 使用uniapp构建一套代码多端使用的前端框架项目 1.2、前端封装工具 dateUtil.js: 功能: 1. 时间日期格式化 2. 传入日期是否和当前日期的比较 完整代码: requestUtil.js: 功能: 1. 定义公共的

    2024年02月14日
    浏览(54)
  • 04 动力云客之登录后获取用户信息+JWT存进Redis+Filter验证Token + token续期

    非常好实现. 只要新建一个controller, 并调用SS提供的Authentication对象即可 未登录状态下可以直接访问 api/login/info吗? 不可以. 因为在安全配置类已经写明了, 仅登陆界面允许任何人访问, 其他所有界面都需要认证 由于未写JWT, 默认使用Session 保存会话, ???好像不对 因此只要我们先

    2024年02月21日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包