第4讲引入JWT前后端交互

引入JWT前后端交互

Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC
7519);
JWT就是一段字符串,用来进行用户身份认证的凭证,该字符串分成三段【头部、载荷、签证】

在这里插入图片描述
后端接口测试:

@RestController
@RequestMapping("/test")
public class TestController {@Autowiredprivate SysUserService sysUserService;@GetMapping("/user/list")public R userList(@RequestHeader(required = false) String token){if(StringUtil.isNotEmpty(token)){Map<String,Object> resutMap=new HashMap<>();List<SysUser> userList = sysUserService.list();resutMap.put("userList",userList);return R.ok(resutMap);}else{return R.error(401,"没有权限访问");}}@GetMapping("/login")public R login(){String token= JwtUtils.genJwtToken("java1234");return R.ok().put("token",token);}}

前端测试:

<template><el-button type="primary" @click="handleLogin">测试登录</el-button><el-button type="danger" @click="handleUserList">测试获取用户列表信息</el-button></template>
<script setup>
import requestUtil from '@/util/request'
import store from '@/store'const handleLogin=async()=>{let result=await requestUtil.get("test/login");let data=result.data;if(data.code==200){const token=data.token;console.log("登录成功:token="+token);store.commit('SET_TOKEN',token);}else{console.log("登录出错!")}
}const handleUserList=async ()=>{let result=await requestUtil.get("test/user/list");let data=result.data;if(data.code==200){const userList=data.userList;console.log("用户列表信息:userList="+userList);}else{console.log("出错!")}
}</script>
<style></style>

跨越问题:

在这里插入图片描述

@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE","OPTIONS").maxAge(3600);}}

封装request.js

// 引入axios
import axios from 'axios';
import store from '@/store'let baseUrl="http://localhost:80/";
// 创建axios实例
const httpService = axios.create({// url前缀-'http:xxx.xxx'// baseURL: process.env.BASE_API, // 需自定义baseURL:baseUrl,// 请求超时时间timeout: 3000 // 需自定义
});//添加请求和响应拦截器
// 添加请求拦截器
httpService.interceptors.request.use(function (config) {// 在发送请求之前做些什么//config.headers.token=window.sessionStorage.getItem('token');console.log("store="+store.getters.GET_TOKEN)config.headers.token=store.getters.GET_TOKENreturn config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
httpService.interceptors.response.use(function (response) {// 对响应数据做点什么return response;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});/*网络请求部分*//**  get请求*  url:请求地址*  params:参数* */
export function get(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'get',params: params}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}/**  post请求*  url:请求地址*  params:参数* */
export function post(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params}).then(response => {console.log(response)resolve(response);}).catch(error => {console.log(error)reject(error);});});
}/**  文件上传*  url:请求地址*  params:参数* */
export function fileUpload(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params,headers: { 'Content-Type': 'multipart/form-data' }}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}export function getServerUrl(){return baseUrl;
}export default {get,post,fileUpload,getServerUrl
}

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

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

相关文章

【JavaSE】类和对象

面向对象概述 面向对象编程&#xff08;简称POP&#xff09;&#xff0c;其核心思想就是参照现实中的事物&#xff0c;将事物的属性特征、行为特征抽象出来&#xff0c;使用类来表示&#xff0c;当涉及到一个具体的实例时&#xff0c;就将类进行实例化&#xff0c;使用一个对象…

【镜头知识】对焦和变焦

前言 变焦 调整某几个镜片的相对位置&#xff0c;从而改变镜片组的焦距&#xff0c;进而改变图像的视场角度。 焦距和视角以及拍摄距离的关系这张图能更好的体现&#xff1a; 视角越窄&#xff0c;也意味着放大的倍数越大&#xff01; 对焦 物体反射的光线&#xff0c;有很多不…

《Go 简易速速上手小册》第6章:错误处理和测试(2024 最新版)

文章目录 6.1 错误处理机制 - Go 语言中的优雅回旋6.1.1 基础知识讲解6.1.2 重点案例&#xff1a;文件读取器功能描述实现代码 6.1.3 拓展案例 1&#xff1a;网络请求处理器功能描述实现代码 6.1.4 拓展案例 2&#xff1a;数据库查询执行器功能描述实现代码 6.2 编写可测试的代…

RK3568笔记十七:LVGL v8.2移植

若该文为原创文章&#xff0c;转载请注明原文出处。 本文介绍嵌入式轻量化图形库LVGL 8.2移植到Linux开发板ATK-RK3568上的步骤。 主要是参考大佬博客&#xff1a; LVGL v8.2移植到IMX6ULL开发板_lvgl移植到linux-CSDN博客 一、环境 1、平台&#xff1a;rk3568 2、开发板:…

C++初阶(十一) list

一、list的介绍及使用 1.1 list的介绍 list的文档介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点…

简单聊聊k8s,和docker之间的关系

前言 随着云原生和微服务架构的快速发展&#xff0c;Kubernetes和Docker已经成为了两个重要的技术。但是有小伙伴通常对这两个技术的关系产生疑惑&#xff1a; 既然有了docker&#xff0c;为什么又出来一个k8s&#xff1f; 它俩之间是竞品的关系吗&#xff1f; 傻傻分不清。…

HTML5+CSS3小实例:彩色拨动开关

实例:彩色拨动开关 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><…

软件工程师,超过35岁怎么办

概述 随着科技行业的飞速发展&#xff0c;软件开发工程师的职业道路充满了各种机遇和挑战。对于已经在这个行业摸爬滚打了十多年的软件开发工程师来说&#xff0c;当他们步入35岁这个年纪时&#xff0c;可能会感到一些迷茫和焦虑。许多人担忧&#xff0c;在以创新、活力、快速迭…

机器人学环境配置(VM-16 + Ubuntu-20.04 + ROS-noetic)

目录 一、安装好 VMware Pro 16(基于win11) 1. 下载 2. 安装过程 二、成功配置Ubuntu20.04.6 1. 下载 2. 新建虚拟机进行配置 3. 安装操作系统镜像 4. 更改Ubuntu软件源 5. Windows与Ubuntu跨系统复制粘贴 三、成功配置与Ubuntu20.04对应的ROS 1. 按ctrl+alt+t打…

「算法」滑动窗口

前言 算法需要多刷题积累经验&#xff0c;所以我行文重心在于分析解题思路&#xff0c;理论知识部分会相对简略一些 正文 滑动窗口属于双指针&#xff0c;这两个指针是同向前行&#xff0c;它们所夹的区间就称为“窗口” 啥时候用滑动窗口&#xff1f; 题目涉及到“子序列…

docker——启动 停止所有容器——命令备份

docker中 启动所有的容器命令 docker start $(docker ps -a | awk ‘{ print $1}’ | tail -n 2) docker中 关闭所有的容器命令 docker stop $(docker ps -a | awk ‘{ print $1}’ | tail -n 2) docker中 删除所有的容器命令 docker rm $(docker ps -a | awk ‘{ print $…

【天衍系列 04】深入理解Flink的ElasticsearchSink组件:实时数据流如何无缝地流向Elasticsearch

文章目录 01 Elasticsearch Sink 基础概念02 Elasticsearch Sink 工作原理03 Elasticsearch Sink 核心组件04 Elasticsearch Sink 配置参数05 Elasticsearch Sink 依赖管理06 Elasticsearch Sink 初阶实战07 Elasticsearch Sink 进阶实战7.1 包结构 & 项目配置项目配置appl…

ADO世界之FIRST

目录 一、ADO 简介 二、ADO 数据库连接 1.创建一个 DSN-less 数据库连接 2.创建一个 ODBC 数据库连接 3.到 MS Access 数据库的 ODBC 连接 4.ADO 连接对象&#xff08;ADO Connection Object&#xff09; 三、ADO Recordset&#xff08;记录集&#xff09; 1.创建一个 …

专业140+总410+合工大合肥工业大学833信号分析与处理综合考研经验电子信息与通信工程,真题,大纲,参考书。

经过一年努力奋战&#xff0c;今年初试总分410&#xff0c;其中专业课833信号分析与处理综合&#xff08;ss和dsp&#xff09;140&#xff08;感谢信息通信Jenny老师去年的悉心指导&#xff09;&#xff0c;数一130&#xff0c;顺利上岸&#xff0c;被合工大录取&#xff0c;看…

并查集详解及模板

1. 解决什么问题&#xff1f; 当题目最终要将数据分成若干个集合时&#xff0c;可往并查集的方向思考。并查集三个字拆开对应“合并”&#xff0c;“查找”&#xff0c;“集合”&#xff0c;这样就很好理解了。 【思路】 为了方便查找和合并&#xff0c;每个元素都有对应的代…

【Qt笔记】QSS中常用的子控件

QSS中常用的子控件 子控件名称说明::branchQTreeView的分支指示器::chunkQProgressBar的进度显示块::close-buttonQDockWidgte或QTabBar页面的关闭按钮::down-arrowQComboBox、QHeaderView(排序指示器)、QScrollBar或QSpinBox的下拉箭头::down-buttonQScrollBar或QSpinBox的向…

C语言——oj刷题——杨氏矩阵

目录 1. 理解杨氏矩形的特点 2. 实现杨氏矩形查找算法 3. 编写示例代码 当我们谈到杨氏矩形时&#xff0c;我们指的是一种在二维数组中查找目标元素的高效算法。它是由杨氏&#xff08;Yan Shi&#xff09;教授提出的&#xff0c;因此得名为杨氏矩形。 杨氏矩形问题的场景是…

必考板子题【Py/Java/C++三种语言详解】LeetCode每日一题240214【二叉树BFS】LeetCode102、二叉树的层序遍历

有LeetCode交流群/华为OD考试扣扣交流群可加&#xff1a;948025485 可上全网独家的 欧弟OJ系统 练习华子OD、大厂真题 绿色聊天软件戳 od1336了解算法冲刺训练 文章目录 题目链接题目描述解题思路DFS和BFS异同用队列维护的BFS 代码PythonPythonJavaC时空复杂度 相关习题华为OD算…

初始Git及Linux Centos下安装Git

文章目录 前言版本控制器注意Git安装 前言 不知道你⼯作或学习时&#xff0c;有没有遇到这样的情况&#xff1a;我们在编写各种⽂档时&#xff0c;为了防⽌⽂档丢失&#xff0c;更改失误&#xff0c;失误后能恢复到原来的版本&#xff0c;不得不复制出⼀个副本&#xff0c;⽐如…

一个小白的转行Python的经历!

1. 寻找一个导师 导师可以降低你加入一个新行业的成本&#xff0c;帮助你熟悉环境和行业规则&#xff0c;也会鼓励你完成心理方面的转变。 2. 建立新的社交网络 过去的人脉关系会阻碍你的转行&#xff0c;因为他们是以过去对你的认知来评价你。新领域的人脉&#xff0c;会给你提…