登录模块的实现

一.前期的准备工作

1.页面的布局

  (1)表单的校验:

            利用element-ui提供的文档绑定rules规则后实现校验

  (2)跨域的配置 :

          利用proxy代理来解决跨域的问题

  (3)axios拦截器的配置

  两个点:1. 在请求拦截的成功回调中,如果token,因为调用其它的接口需要token才能调取。

                  在请求头中加入token。

              2.在响应拦截器中进行数据的一层解析: return res .data

                  进行统一错误的处理,返回的状态码是200,但是success的值是false,代表业务的失败。

 (4)环境变量的配置

在根路径准备好生成环境和开发环境的基地址。

baseUrl:process.env获取

(5)在vuex中存储token


按需导入使用第三方库的方法 
import {gettoken,settoken,removetoken} from '第三方库的路径'satae:token:gettoken()mutation定义方法来获取tokenaction
定义接口来获取token

(6)定义api接口的封装文件

默认导入
import request from '拦截器文件'
定义方法:
export login(){url:'/api地址'method:请求的方法
}

(7)点击登录按钮

导入方法
import {login } form '文件的路径'

在表单验证通过后:
调用接口 login().then(res=>{ 
通过 this.$store.dispatch('vuex action方法的模块名字' ,返回回来的token作为实参传递过(res))
})

这样就获取到了token。

(8)登录后跳转首页的问题

在点击登录按钮之后,会出现

在这个步骤中,通过this.$store.dispatch来出发模块并且调用接口,很显然这个步骤是一个异步的,

如果采用.then的方法,他是一个回调函数

使用then方法,他还是立马执行:
this.$store.push('/')

很明显这是不符合逻辑的,假设我们的业务逻辑的:

action这个模块还没出发,就直接跳转到了首页。

如果解决这个问题?

利用async await即可解决:          

如果 await后面是一个Promise对象,则会等Promise对象返回后面的值在去执行它之后的代码。

如果返回的不是一个Promise,则指向的是代码完成的一个返回值。

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

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

相关文章

二刷Laravel 教程(用户注册)总结Ⅳ

一、显示用户信息 1)resource Route::resource(users, UsersController); 相当于下面这7个路由 我们先用 Artisan 命令查看目前应用的路由: php artisan route:list 2) compact 方法 //我们将用户对象 $user 通过 compact 方法转化为一个关联…

数据聚合、自动补全、数据同步、es集群

目录 数据聚合 聚合的分类 DSL实现bucket聚合 DSL实现Metrics聚合 RestAPI实现聚合 多条件聚合 带过滤条件的聚合 自动补全 安装拼音分词器 自定义分词器 completion suggester查询 修改索引库数据结构 RestAPI实现自动补全查询 实现搜索框自动补全 数据同步 数…

华为HarmonyOS 创建第一个鸿蒙应用 运行Hello World

使用DevEco Studio创建第一个项目 Hello World 1.创建项目2.预览 Hello World3.安装模拟器4.运行 Hello World 1.创建项目 创建第一个项目,命名为HelloWorld,点击Finish 选择Empty Ability模板,点击Next Hello World 项目已经成功创建…

【VRTK】【VR开发】【Unity】19-VRTK实现旋转运动

课程配套学习项目源码资源下载 https://download.csdn.net/download/weixin_41697242/88485426?spm=1001.2014.3001.5503 【背景】 在实际开发中,旋转运动也是时常需要模拟的重要运动类型。常见的场景有开关门,方向盘轮胎以及拉动拉杆等等。 旋转运动的实现可以基于物理系…

使用 matlab 求解最小二乘问题

有约束线性最小二乘 其标准形式为: min ⁡ x 1 2 ∥ C x − d ∥ 2 2 \mathop {\min }\limits_x \quad \frac{1}{2}\left\| Cx-d \right\|_2^2 xmin​21​∥Cx−d∥22​ 约束条件为: A ⋅ x ≤ b A e q ⋅ x b e q l b ≤ x ≤ u b \begin{aligned} …

基于多反应堆的高并发服务器【C/C++/Reactor】(中)HttpResponse的定义和初始化 以及组织 HttpResponse 响应消息

一、HttpResponse的定义 1.定义状态码枚举 // 定义状态码枚举 enum HttpStatusCode {Unknown 0,OK 200,MovedPermanently 301,MovedTemporarily 302,BadRequest 400,NotFound 404 }; 2.HTTP 响应报文格式 这个数据块主要是分为四部分 第一部分是状态行第二部分是响应…

游戏、设计选什么内存条?光威龙武系列DDR5量大管饱

如果你是一位PC玩家或者创作者,日常工作娱乐中,确实少不了大容量高频内存的支持,这样可以获得更高的工作效率,光威龙武系列DDR5内存条无疑是理想之选。它可以为计算机提供强劲的性能表现和稳定的运行体验,让我们畅玩游…

无监督学习Principal Component Analysis(PCA)精简高维数据

目录 介绍 一、PCA之前 二、PCA之后 介绍 Principal Component Analysis (PCA) 是一种常用的数据降维和特征提取技术。PCA通过线性变换将高维数据映射到低维空间,从而得到数据的主要特征。PCA的目标是找到一个正交基的集合,使得将数据投影到这些基…

【C语言小游戏】贪吃蛇

文章目录 1.引言2.运行图2.涉及知识3 Windows API3.1 控制台3.2 控制台屏幕坐标3.3 操作句柄3.4 控制台屏幕光标3.5 监视按键 4. 设计说明5. 完整代码 1.引言 使⽤C语⾔在Windows环境的控制台中模拟实现经典⼩游戏贪吃蛇 实现基本的功能: 贪吃蛇地图绘制蛇吃⻝物的…

vue简体繁体互转无需做字库

第一种方法 vue-i18n 需要自己写字库库很麻烦,而且不支持后端传值 第二种 opencc 这个库前端去使用的时候 数据较多的情况非常慢.影响使用 第三种 language-hk-loader npm i language-hk-loader 从其他博客中看到的一种,很方便不需要写字库,但是在打包的时候去整体的去翻译…

网络层详解

目录 前言 一、IP协议 1、IP协议报头 2、协议字段理解 (1)4位版本 (2)4位首部长度 (3)8位服务类型 (4)16位总长度 (5)标识、标志与片偏移 &#xf…

2024-01-11 部署Stable Diffusion遇挫记

点击 <C 语言编程核心突破> 快速C语言入门 部署Stable Diffusion遇挫记 前言一、一如既往的GitHub部署二、使用的感受总结 create by Stable Diffusion; prompt: fire water llama 前言 要解决问题: 由于近期的努力, 已经实现语音转文字模型, 通用chat迷你大模型的本地…

后端程序员开发win小工具(未完待续)

github&#xff1a;https://gitee.com/forgot940629/win-tool-demo 本地启动&#xff0c;查看http://127.0.0.1:8080/form 场景 在日常工作中可能需要后端开发者开发一些辅助工具。这些辅助工具通常希望能想其他软件一样在桌面系统运行&#xff0c;并且有一些桌面应用的基本…

dbeaver连接人大金仓报错 can‘t load driver class ‘com.kingbase8.Driver;‘

dbeaver可以连接很多数据库&#xff0c;设置dbeaver连接人大金仓&#xff0c;下载安装完成后&#xff0c;需要自行配置人大金仓的驱动&#xff0c;否则无法连接数据库。 一、dbeaver 下载 dbeaver 下载地址&#xff1a;https://dbeaver.io/download/ 二、查找人大金仓驱动 首…

【开源项目】轻量元数据管理解决方案——Marquez

大家好&#xff0c;我是独孤风。 又到了本周的开源项目推荐。最近推荐的元数据管理项目很多&#xff0c;但是很多元数据管理平台的功能复杂难用。 那么有没有轻量一点的元数据管理项目呢&#xff1f; 今天为大家推荐的开源项目&#xff0c;就是一个轻量级的元数据管理工具。虽然…

Linux动态分配IP与正向解析DNS

目录 一、DHCP分配 1. 动态分配 1.1 服务端服务安装 1.2 修改服务端dhcp配置 1.3 修改客户端dhcp&#xff0c;重启查询网卡信息 2. 根据mac固定分配 2.1 修改服务器端dhcp服务配置 2.2 客户端自动获取&#xff0c;查看网卡信息 二、时间同步 1. 手动同步 2. 自动同…

使用numpy处理图片——图片拼接

大纲 左右拼接上下拼接 在《使用numpy处理图片——图片切割》一文中&#xff0c;我们介绍了如何使用numpy将一张图片切割成4部分。本文我们将反其道而行之&#xff0c;将4张图片拼接成1张图片。 基本的思路就是先用两张图以左右结构拼接成上部&#xff0c;另外两张图也以左右拼…

Win2008R2上RedisDesktopManager 黑屏

问题&#xff1a; 运行发现右侧显示缓存信息的部分是黑屏。 解决方式&#xff1a; 管理工具->远程桌面服务->远程桌面会话主机配置->RDP-TCP->属性->客户端设置->颜色深度->限制最大颜色深度,将16位改为32位

新能源时代-电动汽车充电桩设备建设及运维平台搭建

安科瑞 崔丽洁 摘要&#xff1a;在社会经济发展的新时期&#xff0c;我国城市化的水平也在随之不断的提高&#xff0c;使我国制造业迅速崛起&#xff0c;并加剧了该行业的竞争力&#xff0c;要想使企业在竞争中占据有力的位置&#xff0c;企业就要顺应时代发展的潮流&#xff0…

Thumbnail AI:让图片处理更智能

一、产品介绍 Thumbnail AI是一款基于人工智能技术的图片处理软件&#xff0c;能够快速、准确地生成各种尺寸的缩略图。这款软件非常适合用于网站建设、广告设计、电商等领域&#xff0c;能够大大提高图片处理效率。 二、应用场景 网站建设&#xff1a;在网站建设中&#xff…