前端怎么做一个验证码和JWT,使用mockjs模拟后端

news2024/11/14 14:53:27

流程图

创建一个发起请求

创建一个方法

    getCaptchaImg() {
      this.$axios.get('/captcha').then(res => {
        console.log(res);
        this.loginForm.token = res.data.data.token
        this.captchaImg = res.data.data.captchaImg
        console.log(this.captchaImg)
      })
    },
    captchaImg: "",

创建一个参数

先使页面刷星调用这个方法

  created() {
    this.getCaptchaImg();

  },

要导入的图片,我这里加宽和高是因为,我的显示不出来,也不知道什么原因,望大佬指教

          <el-input v-model="loginForm.code">
            <el-image slot="append" v-if="captchaImg" :src="captchaImg" style="width: 70px;height: 30px"
                      class="captchaImg"></el-image>
          </el-input>

使用mockjs

在main.js中加入

创建一个mock.js的文件

就可以模拟后端接口

const Mock = require('mockjs')

const Random = Mock.Random
返回的结果
let Result = {
    code: 200,
    msg: '操作成功',
    data: null
};
这里和前端对应
Mock.mock('/captcha', 'get', () => {
    Result.data = {
        token: Random.string(32),
        这些方法可以在mockjs的官网上面去查询
        captchaImg: Random.dataImage('100x40', 'p7n5w'),
    }
    return Result;
});
Mock.mock('/login', 'post', () => {
    //无法往header中传入数据
    return Result;
});

结果

有点丑,见谅

现在我们要让所有页面都能有JWT

我们就要在store/index.js中进行一个传值

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
设置一个变量token
    token: '',
  },
  getters: {
  },
  mutations: {
设置一个方法,将token存入localStorage
      SET_TOKEN: (state, token) => {
          state.token = token
          localStorage.setItem("token", token)
      },

  },
  actions: {
  },
  modules: {
  }
})

写一个发请求的方法

    submitForm(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          this.$axios.post('/login', this.loginForm).then(res => {
            const jwt = res.headers['authorization']
            // 把jwt放到请求头中
            this.$store.commit('SET_TOKEN', jwt)
            //页面的跳转
            this.$router.push('/index')

          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

mockjs中写接口

Mock.mock('/login', 'post', () => {
    //无法往header中传入数据
    return Result;
});

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

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

相关文章

钡铼技术M12双通道防水分线盒稳定可靠

钡铼技术的DB系列M12双通道防水分线盒是一款专为工业自动化环境设计的高性能产品。其采用耐酸碱腐蚀材料制成的壳体&#xff0c;能够达到IP67防护等级&#xff0c;并通过灌胶工艺进一步提升到IP69K防护等级&#xff0c;确保在恶劣的工业条件下仍然能稳定可靠地运行。 技术特点…

小怡分享之Java的继承和多态

前言&#xff1a; &#x1f308;✨小怡给大家分享了Java的类和对象&#xff0c;今天小怡给大家分享的是继承和多态。 1.继承 1.1 为什么需要继承 Java中使用类对现实世界中实体来进行描述&#xff0c;类经过实例化之后的产物对象&#xff0c;则可以用来表示现实中的实体&…

无人机之环境监测篇

无人机在各个领域的应用越来越广泛&#xff0c;环境监测便是其中之一&#xff0c;它们能够提供高效、安全、经济的监测手段&#xff0c;帮助科学家和管理者更好的理解环境状况并采取相应措施。 一、污染监测 无人机可以搭载各种传感器&#xff0c;如气体检测器、红外热像仪等&…

Map遍历 32

package Array.collection;import java.util.HashMap; import java.util.Map; import java.util.Set; import java.util.function.BiConsumer;public class map1 {public static void main(String[] args) {Map<String, Double> anew HashMap<>();a.put("合法…

图论进阶之路-最短路(Floyd)

时间复杂度&#xff1a;O(n^3) 使用场景&#xff1a;当需要得知任意两个点的最短距离以及其路径时使用 准备&#xff1a;需要两个矩阵 一个记录最短距离&#xff08;D&#xff09; 一个记录最短路径的最后一个结点&#xff08;P&#xff09; 其核心在于不断的判断越过中间…

transformer代码学习及pytorch函数学习

torch.randint(low, high, size, dtypetorch.int64, devicecpu, **kwargs) low 和 high 如上所述。size 是一个元组&#xff0c;表示张量的形状。dtype 是数据类型&#xff0c;默认为 torch.int64&#xff0c;表示生成的整数是64位整数。device 指定了生成张量所在的设备&#…

结构体与共用体

一、链表 1.尾插 2.头删&#xff1a; 3.尾删&#xff1a; 4.内存泄漏&#xff1a;malloc调用的节点需要手动清除 头删效率更高&#xff0c;算法复杂度更低 二、共用体 1.形式&#xff1a;union 共用体名{成员表列} 变量表列&#xff1b;共用体的成员会占用同样的内存空间 …

微信小程序_对接腾讯实时音视频_多人会议

目录 一、开通腾讯实时音视频 1.腾讯实时音视频简介 2.创建应用 二、快速接入 1.微信小程序账号类目资格 2.跑通腾讯多人会议源码 3.发行项目 三、开发自己的业务代码 如何对接腾讯实时音视频的多人会议产品&#xff0c;从开通服务到对接完成&#xff0c;一 一讲解。 一…

LBS 开发微课堂|Polyline绘制优化:效果更丰富,性能更佳!

为了让广大的开发者 更深入地了解 百度地图开放平台的技术能力 轻松掌握满满的技术干货 更加简单地接入 开放平台的服务 我们特别推出了 “位置服务&#xff08;LBS&#xff09;开发微课堂” 系列技术案例 第一期的主题是 《Polyline 绘制优化升级》 你还想了解哪些…

MySQL:Prepared Statement 预处理语句

预处理语句&#xff08;Prepared Statement&#xff09; 是一种在数据库管理系统中使用的编程概念&#xff0c;用于执行对数据库进行操作的 SQL 语句。 使用预处理语句的具体方式和语法依赖于所用的编程语言和数据库管理系统。常见的编程语言如 Java、PHP、Python 和 C# 都提供…

如何把视频语音转文字?交给这4款工具就完事

这两天巴黎奥运会的盛大开幕&#xff0c;世界各地的记者们纷纷涌入这个体育盛事的现场&#xff0c;带着他们的镜头和麦克风&#xff0c;捕捉每一个激动人心的瞬间。 然而&#xff0c;随着采访的深入&#xff0c;如何快速准确地将这些珍贵的视频内容转化为文字记录&#xff0c;…

代码随想录算法训练营第十七天 | 654.最大二叉树, 617.合并二叉树 ,700.二叉搜索树中的搜索 , 98.验证二叉搜索树

目录 654.最大二叉树 思路 方法一&#xff1a; 递归基础版 方法二&#xff1a;递归使用下标 方法三&#xff1a;递归使用切片 心得收获 617.合并二叉树 思路 递归法 迭代法 方法一&#xff1a; 递归 - 前序 - 修改root1 方法二&#xff1a;递归 - 前序 - 新建root…

敦煌文化主题页面 HTML,CSS,Javascript 源码分享

使用技术&#xff1a;HTML&#xff0c;CSS&#xff0c;JavaScript 项目亮点&#xff1a;加入了大量的CSS动画效果&#xff0c;以及JS交互效果&#xff0c;水平适合初学者以及大学生&#xff0c;包含登录注册页 需要的可以dd&#xff0c; 绿泡泡&#xff1a;ColdDayOne

AI入门指南:什么是人工智能、机器学习、神经网络、深度学习?

文章目录 一、前言二、人工智能(AI)是什么&#xff1f;起源概念人工智能分类人工智能应用 三、机器学习是什么&#xff1f;概念机器学习常见算法机器学习分类机器学习与人工智能的关系 四、神经网络是什么&#xff1f;概念神经网络组成部分神经网络模型神经网络和机器学习的关系…

【Hot100】LeetCode—76. 最小覆盖子串

题目 原题链接&#xff1a;76. 最小覆盖子串 1- 思路 利用两个哈希表解决分为 &#xff1a;① 初始化哈希表、②遍历 s&#xff0c;处理当前元素&#xff0c;判断当前字符是否有效、③收缩窗口、④更新最小覆盖子串 2- 实现 ⭐76. 最小覆盖子串——题解思路 class Solution …

Python | Leetcode Python题解之第316题去除重复字母

题目&#xff1a; 题解&#xff1a; class Solution:def removeDuplicateLetters(self, s: str) -> str:vis defaultdict(int)cnt defaultdict(int)for ch in s: cnt[ch] 1queue []for ch in s:if vis[ch] 0:while queue and queue[-1] > ch and cnt[queue[-1]]:vi…

VS Code设置C++编译器路径

C_Cpp.default.compilerPath是C/C编译器路径; python.condaPath是conda路径.

Could not connect to Redis at 127.0.0.1:6379: 由于目标计算机积极拒绝,无法连接

目录 报错 解决办法 报错 在redis文件夹的路径栏中输入 cmd 命令&#xff0c;打开控制栏窗口界面 报错说是 redis-cli.exe打开就显示Could not connect to Redis at 127.0.0.1:6379: 由于目标计算机积极拒绝&#xff0c;无法连接。 解决办法 &#xff08;1&#xff09;cmd…

【教学类-71-01】20240802蔬菜切切乐01

背景需求&#xff1a; ✂️自制教具分享✂️蔬菜切切乐&#xff08;剪纸&#xff09; - 小红书 (xiaohongshu.com)https://www.xiaohongshu.com/explore/65bf6809000000001100fa53?app_platformandroid&ignoreEngagetrue&app_version8.46.0&share_from_user_hidd…

mybatis保存postgresql数组格式数据

新建表的时候在int4后加上[]中括号就行 -- 创建数组 SELECT ARRAY[1, 2, 3, 4, 5];-- 访问数组元素&#xff08;从1开始&#xff09; SELECT ARRAY[1, 2, 3, 4, 5][1]; -- 返回 1-- 数组长度 SELECT array_length(ARRAY[1, 2, 3, 4, 5], 1); -- 返回 5-- 数组连接 SELECT ARRA…