Vue实现登录保存token并校验实现保存登录状态

文章目录

  • 一、登录vue
  • 二、路由index


一、登录vue

<script>
import request from "@/axios/baseURL";
import router from "@/router";// 接口数据初始化
const FORM_DATA = {userName: "",password: "",
};
export default {data() {return {FORM_DATA,};},created() {console.log("登录界面");},methods: {login() {request.post("/systemUser/login", this.FORM_DATA).then((res) => {var code = res.data.code;var message = res.data.message;this.$message(message);if (code == 0) {localStorage.setItem("token", res.data.data.token);router.push("/library");}console.log(res);});},},
};
</script>

二、路由index

// 导航守卫
router.beforeEach((to, from, next) => {const token = localStorage.getItem('token');const outerPaths = ['/homePage']; // 当前 path 不需要登录也可以进入系统,但是只能操作当前页面if (!token && !outerPaths.includes(to.path)) {next('/homePage');} else {// if (to.path == "/auth") {//   document.title = to.meta.title  // 进入这个页面会被更改页面标题// } else document.title = 'CPS流量变现后台管理系统'next();}
});

在这里插入图片描述

  • 坚持不懈,努力奋斗,心之所向必定成真。
  • 拥有激情与决心,创造无限可能的未来。
  • 放飞心灵,勇往直前,追逐梦想的星辰大海。
  • 不怕失败,享受过程,每一次尝试都是一种进步。
  • 集中注意力,努力前行,不要停下,直到成功只是习惯。

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

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

相关文章

opencv图像处理(3)

1.图像平滑 1.1图像噪声 由于图像采集、处理、传输等过程不可避免的会受到噪声的污染&#xff0c;妨碍人们对图像理解及分析处理。常见的图像噪声有高斯噪声、椒盐噪声等。 1.1.1椒盐噪声 椒盐噪声也称为脉冲噪声&#xff0c;是图像中经常见到的一种噪声&#xff0c;它是一…

CKA认证,开启您的云原生之旅!

在当今数字化时代&#xff0c;云计算已经成为企业和个人发展的关键技术。而获得CKA&#xff08;Certified Kubernetes Administrator&#xff09;认证&#xff0c;将是您在云原生领域迈出的重要一步。 CKA认证是由Kubernetes官方推出的权威认证&#xff0c;它旨在验证您在Kuber…

Java SpringBoot 创建项目工程输出 Hello World

Java SpringBoot 创建项目工程输出 Hello World 1、新建项目 2、创建 controller 3、编写 Hello World 代码 package com.zhong.demo01.controller;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.Res…

音视频数字化(数字与模拟-电视)

上一篇文章【音视频数字化(数字与模拟-音频广播)】谈了音频的广播,这次我们聊电视系统,这是音频+视频的采集、传输、接收系统,相对比较复杂。 音频系统的广播是将声音转为电信号,再调制后发射出去,利用“共振”原理,收音机接收后解调,将音频信号还原再推动扬声器,我…

实战 vue3 使用百度编辑器ueditor

前言 在开发项目由于需求vue自带对编辑器不能满足使用&#xff0c;所以改为百度编辑器&#xff0c;但是在网上搜索发现都讲得非常乱&#xff0c;所以写一篇使用流程的文章 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、下载ueditor编辑器 一个“…

编译 Linux SDK源码包(基于迅为电子的RK3568开发板)

前言&#xff1a; 本文所使用的开发板是迅为电子的RK3568开发板&#xff0c;Linux源码包也是从的开发板自带资料中获取到的&#xff0c;有兴趣者可自行购买&#xff08;话说最近瑞芯微的芯片真的很火啊&#xff09; 目录 前言&#xff1a; SDK 包说明&#xff1a; SDK 包源…

如何使用Logstash搜集日志传输到es集群并使用kibana检测

引言&#xff1a;上一期我们进行了对Elasticsearch和kibana的部署&#xff0c;今天我们来解决如何使用Logstash搜集日志传输到es集群并使用kibana检测 目录 Logstash部署 1.安装配置Logstash &#xff08;1&#xff09;安装 &#xff08;2&#xff09;测试文件 &#xff…

Java+SpringBoot+Vue+MySQL:美食推荐系统的技术革新

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

2024-02-26(Spark,kafka)

1.Spark SQL是Spark的一个模块&#xff0c;用于处理海量结构化数据 限定&#xff1a;结构化数据处理 RDD的数据开发中&#xff0c;结构化&#xff0c;非结构化&#xff0c;半结构化数据都能处理。 2.为什么要学习SparkSQL SparkSQL是非常成熟的海量结构化数据处理框架。 学…

docker小知识:linux环境安装docker

安装必要软件包&#xff0c;执行如下命令 yum install -y yum-utils device-mapper-persistent-data lvm2目的是确保在安装 Docker 之前&#xff0c;系统已经安装了必要的软件包和服务&#xff0c;以支持 Docker 的正常运行。设置yum源&#xff0c;添加Docker官方的CentOS存储…

阿里云服务器2024年优惠价格表曝光,太可怕了!

2024阿里云服务器优惠活动政策整理&#xff0c;轻量2核2G3M服务器61元一年、2核4G4M带宽165元1年&#xff0c;云服务器4核16G10M带宽26元1个月、149元半年&#xff0c;阿里云ECS云服务器2核2G3M新老用户均可99元一年续费不涨价&#xff0c;企业用户2核4G5M带宽199元一年&#x…

微服务-微服务链路追踪组件Skywalking实战

自动化监控系统Prometheus&Grafana实战&#xff1a; 4 trem APM-性能监控项目班&#xff1a; https://vip.tulingxueyuan.cn/detail/p_602e574ae4b035d3cdb8f8fe/6 1. skywalking是什么 1.1 Skywalking主要功能特性 1.2 Skywalking整体架构 1.3 SkyWalking 环境搭建部…

2024热门UI设计工具推荐

最好的UI设计工具可以适应几乎每一个设计过程&#xff0c;并且有望满足您的创造性要求。但既然UI设计工具那么多&#xff0c;应该用什么工具呢&#xff1f; 在过去的几年里&#xff0c;Sketch和figma的结合一直是许多设计师的选择&#xff0c;但其他工具也提供了有竞争力的特点…

Redis 16种妙用

1、缓存 2、数据共享分布式 3、分布式锁 4、全局ID 5、计数器 6、限流 7、位统计 8、购物车 9、用户消息时间线timeline 10、消息队列 11、抽奖 12、点赞、签到、打卡 13、商品标签 14、商品筛选 15、用户关注、推荐模型 16、排行榜 1、缓存 String类型 例如&#xff1a;热点…

QT信号槽实现分析

1.宏定义 qt中引入了MOC来反射&#xff0c;编译阶段变成 MOC–>预处理–>编译–>汇编–>链接 1-1、Q_OBJECT 这个宏定义了一系列代码&#xff0c;包括元对象和处理的函数 #define Q_OBJECT \public: \QT_WARNING_PUSH \Q_OBJECT_NO_OVERRIDE_WARNING \static c…

【学海无涯】嵌入式工程师的100本专业书籍

001《大话数据结构》 002《鸟哥的 linux 私房菜》 003《疯狂 android 讲义》 004《第一行代码》 005《linux 内核设计与实现》 006《驱动设计开发》 007《linux 内核解密》 008《unix 环境高级编程》 009《linux 内核设计与实现》 010《essential C》 011《嵌入式 li…

CTFHub技能树web之XSS

在XSS系列的题目中&#xff0c;由于需要使用能够接受XSS数据的平台&#xff0c;并且由于使用的是CTFHub的模拟机器人点击我们的虚假URL&#xff0c;因此使用的XSS平台不能是自己本地搭建的&#xff0c;如果是本地的模拟点击的机器人将无法访问我们给的这个URL地址&#xff0c;也…

移动端学习:如何把exe转换成apk

exe转换成apk是怎么实现的呢?-电脑端-一门科技将exe文件转换成apk文件是一个比较常见的需求,尤其是对于一些开发者和用户来说。但是,这个过程并不是简单的复制和粘贴。在本文中,我们将介绍exe转换成apk的原理和详细介绍。首先,我们需要了解什么https://www.yimenapp.net/k…

Windows常用协议

LLMNR 1. LLMNR 简介 链路本地多播名称解析(LLMNR)是一个基于域名系统(DNS)数据包格式的协议,可用于解析局域网中本地链路上的主机名称。它可以很好地支持IPv4和IPv6&#xff0c;是仅次于DNS 解析的名称解析协议。 2.LLMNR 解析过程 当本地hosts 和 DNS解析 当本地hosts 和 …

pytorch --反向传播和优化器

1. 反向传播 计算当前张量的梯度 Tensor.backward(gradientNone, retain_graphNone, create_graphFalse, inputsNone)计算当前张量相对于图中叶子节点的梯度。 使用反向传播&#xff0c;每个节点的梯度&#xff0c;根据梯度进行参数优化&#xff0c;最后使得损失最小化 代码…