Vue中Vue router和axios的封装使用。

模拟场景:

当用户登录后,后台会返回一个token给前端,前端下次进入首页后,会先判断token是否过期,如果过期自动进入登录页面。

配置路由:

1.安装

npm install vue-router@4

2.安装后在src目录下创建router文件夹,并创建index.js 代码如下:

// vue-router中提供3种的路由模式
import { createWebHistory, createRouter } from 'vue-router'
import { checktoken } from '../request/api';const routes = [{path: '/',name: "home",component: () => import('../components/Pages/Home.vue'),},{path: '/login',name: 'login',component: () => import('../components/Pages/Login.vue'),}
]const router = createRouter({// 路由的模式history: createWebHistory(),// 路由规则routes
})//导航守卫 导航前做点操作
router.beforeEach(async (to, from, next) => {// 编写一个函数来检查 token 是否有效if (to.name == 'home' && await checkTokenValidity()) {// 如果进入首页且未认证,则重定向到登录页next({ name: 'login' });} else {// 其他情况允许通过next();}
});async function checkTokenValidity() {// 获取 tokenconst token = localStorage.getItem('token');if (token) {// 使用 ' ' 分割字符串const arr = token.split(' ');let tokenstr = arr[1];return await checktoken({ token: tokenstr })}return true
}export default router

配置axios:

1.安装

npm install axios

2.在src中创建request文件夹,并创建http.js和api.js

3.http.js用于封装axios实例 代码如下:

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import { ElMessage } from 'element-plus'const config={// `url` 是用于请求的服务器 URLurl: '/api',// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URLbaseURL: 'http://localhost:56030/api',// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)// 如果请求话费了超过 `timeout` 的时间,请求将被中断timeout: 10000,}const requests = axios.create(config);//请求拦截器(可以在请求发出去之前,做一些事情)
requests.interceptors.request.use((config) => {return config;});//响应拦截器(在数据返回之后,做一些事情)requests.interceptors.response.use((res) => {return res.data;},(err) => {console.log(err);ElMessage.error(err.response.data)})export default requests;

4.api.js用于对接口的统一管理 代码如下:

import requests from "./http";  //引入二次封装的axios
export const login = (params)=>requests({url:'/Account/login ',method:'post',data:params});
export const checktoken = (params)=>requests({url:'/Account/checktoken ',method:'post',data:params});

对路由和封装接口的使用

1.登录login.vue组件,这里只看用法即可。 代码如下:


<template><el-card class="box-card"><el-text class="title" type="warning" size="large">Metadata科技屋</el-text><div style="margin: 40px;"></div><el-form label-position="top" label-width="100px" :model="formLabelAlign" style="max-width: 460px"><el-form-item label="账号"><el-input v-model="formLabelAlign.accountNumber" /></el-form-item><el-form-item label="密码"><el-input v-model="formLabelAlign.password" type="password" /></el-form-item><el-button class="loginbut" type="primary" @click="onSubmit">登录</el-button></el-form></el-card>
</template><script setup>
import { reactive } from 'vue'
import { login } from '../../request/api';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();const formLabelAlign = reactive({accountNumber: 'admin',password: '123456'
})const onSubmit = async () => {var token = await login(formLabelAlign)if (token) {// 存储 token    [Authorize(AuthenticationSchemes = "Bearer")]localStorage.setItem('token',"Bearer "+token);ElMessage({message: '登录成功',type: 'success',})// 字符串路径router.push('/');}
}</script><style scoped>
.el-card {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.box-card {width: 480px;height: 320px;
}.title {position: absolute;left: 50%;transform: translate(-50%, -50%);
}.loginbut {float: right;
}
</style>

登录成功后的路由跳转需要引用这句代码:

import { useRouter } from 'vue-router';
const router = useRouter();// 字符串路径
router.push('/');

main.js代码如下:

import { createApp } from 'vue'// 图标和组件需要分开引入
import ElementPlus from 'element-plus';   // 引入 ElementPlus 组件import 'element-plus/dist/index.css'
// Element Plus
import 'element-plus/theme-chalk/index.css'  // 引入 ElementPlus 组件样式import 'element-plus/theme-chalk/dark/css-vars.css'import { Edit } from '@element-plus/icons-vue'  // 按需引入 Icon 图标 import  router  from './router/index'import App from './App.vue'const app =  createApp(App)
app.use(router)
app.component('Edit', Edit)
app.use(ElementPlus)  // 全局挂载 ElementPlus
app.mount('#app')

app.vue代码:

<script>export default {};</script><template><router-view></router-view>
</template><style scoped>.common-layout
{
height: 100vh;
}
.el-container
{height: 100vh;
}</style>

给出main.js代码和app.vue代码,可以更方便的看出路由的使用方式。

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

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

相关文章

基于Springboot的美容院管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的美容院管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&a…

qt treeview 删除节点

Qt 中&#xff0c;要删除 QTreeView 中的节点&#xff0c;可以通过操作其模型&#xff08;QAbstractItemModel&#xff09;来实现。以下是一个简单的示例&#xff0c;展示如何从 QTreeView 中删除节点。 假设你有一个 QTreeView&#xff0c;它使用了 QStandardItemModel 作为模…

Redis(事务和持久化)(很重要!)

事务的定义&#xff1a; Redis中的事务是指一组命令的集合&#xff0c;这些命令可以在一个原子操作中执行。在Redis中&#xff0c;可以使用MULTI命令开始一个事务&#xff0c;然后使用EXEC命令来执行事务中的所有命令&#xff0c;或者使用DISCARD命令来取消事务。事务可以确保…

爬取春秋航空航班信息

一、使用fiddler爬取小程序春秋航空航班信息 使用Fiddler爬取春秋航空微信小程序&#xff08;手机上由于网络问题&#xff0c;无法进入&#xff0c;使用电脑版&#xff09; 搜索航班信息 搜索记录 使用Fiddler查找url(没有得到有效url) 继续查找&#xff0c;发现航班信息列…

数据结构:二叉树(初阶)

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下二叉树方面的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 …

振南技术干货集:制冷设备大型IoT监测项目研发纪实(3)

注解目录 1.制冷设备的监测迫在眉睫 1.1 冷食的利润贡献 1.2 冷设监测系统的困难 &#xff08;制冷设备对于便利店为何如何重要&#xff1f;了解一下你所不知道的便利店和新零售行业。关 于电力线载波通信的论战。&#xff09; 2、电路设计 2.1 防护电路 2.1.1 强电防护…

vue 中为什么需要虚拟DOM、VDOM 是如何生成的、VDOM 如何做 diff 的?

一、vue 中为什么需要虚拟DOM 1.1本概念 基本上所有框架都引入了虚拟 DOM 来对真实 DOM 进行抽象&#xff0c;也就是现在大家所熟知的VNode 和VDOM Virtual DOM 就是用js 对象来描述真实 DOM&#xff0c;是对真实 DOM 的抽象&#xff0c;由于直接操作 DOM 性能低但是is 层的操…

Jmeter执行某个请求时,先删除cookie信息

1、增加BeanShell PreProcessor 2、添加如下内容 import org.apache.jmeter.protocol.http.control.CookieManager;// Get the current threads cookie manager CookieManager cm sampler.getCookieManager();// Clear all cookies for this domain cm.clear();

力扣labuladong——一刷day45

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣270. 最接近的二叉搜索树值二、力扣404. 左叶子之和三、力扣617. 合并二叉树四、力扣623. 在二叉树中增加一行 前言 二叉树的递归分为「遍历」和「分解…

LeetCode:2304. 网格中的最小路径代价(C++)

目录 2304. 网格中的最小路径代价 题目描述&#xff1a; 实现代码&#xff1a; dp&#xff08;dp有很多相似的经典题目&#xff0c;比较简单&#xff0c;不再给出解析&#xff09; 2304. 网格中的最小路径代价 题目描述&#xff1a; 给你一个下标从 0 开始的整数矩阵 grid …

Redis篇---第十四篇

系列文章目录 文章目录 系列文章目录前言一、为什么Redis的操作是原子性的,怎么保证原子性的?二、了解Redis的事务吗?四、Redis 的数据类型及使用场景前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男…

旧电脑升级记录

我把家里的电脑搬来了北京&#xff0c;但是这个配置在今天已经完全不够用了&#xff0c;而且我也喜欢折腾&#xff0c;我就想着花点时间&#xff0c;画最少的钱来升级一下。我对电脑的硬件还是懂一点的&#xff0c;装机也完全不是问题。 H61的主板,所以cpu我从E3 1230V2&#…

前端js调取摄像头并实现拍照功能

前言 最近接到的一个需求十分有意思&#xff0c;设计整体实现了前端仿 微信扫一扫 的功能。整理了一下思路&#xff0c;做一个分享。 tips: 如果想要实现完整扫一扫的功能&#xff0c;你需要掌握一些前置知识&#xff0c;这次我们先讲如何实现拍照并且保存的功能。 一. windo…

了解1688API接口测试 | 1688 API接口测试指南

在当今电子商务快速发展的时代&#xff0c;1688作为中国最大的B2B电子商务平台之一&#xff0c;为商家提供了丰富的商品资源和交易平台。为了方便商家进行商品管理和交易操作&#xff0c;1688提供了一系列的API接口&#xff0c;通过这些接口&#xff0c;商家可以方便地获取商品…

什么是凸函数

假设函数是定义在某个向量空间的凸子集上的实值函数&#xff0c;并且&#xff0c;如果对于中的任何两个向量和&#xff0c;都满足&#xff1a; 则称为上的凸函数

ubuntu 安装 towhee

安装Towhee pip3 install towhee如果你想在 towhee 中安装模型 pip3 install towhee.models打开python终端 python3引入towhee 数据转换是 Towhee 的核心&#xff1b;管道只是在有向无环图中连接在一起的一系列转换。所有预构建的 Towhee 管道都有代表当前任务的名称。 fr…

Oracle数据库如何定位trace file位置

用一个示例来说明吧。 在导入master key时&#xff0c;出现错误&#xff1a; ADMINISTER KEY MANAGEMENTIMPORT KEYS WITH SECRET "my_secret"FROM /tmp/export.expIDENTIFIED BY keypwd5 WITH BACKUP; ADMINISTER KEY MANAGEMENT * ERROR at line 1: ORA-46655…

动态规划求 x 轴上相距最远的两个相邻点 java 代码实现

如图为某一状态下 x 轴上的情况&#xff0c;此时 E、F相距最远&#xff0c;现在加入一个点H&#xff0c;如果H位于点A的左边的话&#xff0c;只需要比较 A、H 的距离 和 E、F 的距离&#xff1b;如果点H位于点G的右边&#xff0c;则值需要比较 G、H 的距离 和 E、F 的距离&…

前端实现表格生成序号001、002、003自增

我们最终想要实现的效果如图&#xff0c;从后端获取数据之后&#xff0c;不使用data中的id&#xff0c;而是使用自己生成的按照顺序自增的序号id。 script <template><el-table :data"sticker" border style"width: 100%" id"stickerList&q…

[Python人工智能] 四十.命名实体识别 (1)基于BiLSTM-CRF的威胁情报实体识别万字详解

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前一篇文章普及VS Code配置Keras深度学习环境,并对比常用的深度学习框架,最后普及手写数字识别案例。这篇文章将讲解如何实现威胁情报实体识别,利用BiLSTM-CRF算法实现对ATT&CK相关的技战术实体…