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();
  }
});

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

腾讯文档(excel也一样)设置单元格的自动行高列宽

1. 选中单元格 可选择任意一个或者几个 2. 设置自动 行高和列宽 即可生效

掌握微信小程序开发的核心要点:从基础到进阶

文章目录 掌握微信小程序开发的核心要点&#xff1a;从基础到进阶一、数据绑定和事件处理1.1 理解小程序的数据绑定机制&#xff0c;实现数据和视图的同步更新1.2 学习如何处理用户交互事件和触发相应的响应逻辑 二、网络请求和数据交互2.1 使用小程序的网络请求API与后端服务器…

unity发布webGL压缩方式的gzip,使用nginx作为web服务器时的配置文件

unity发布webGL压缩方式的gzip&#xff0c;使用nginx作为web服务器时的配置文件 Unity版本是&#xff1a;2021.3 nginx的版本是&#xff1a;nginx-1.25.4 Unity发布webgl时的测试 设置压缩方式是gzip nginx配置文件 worker_processes 1;events {worker_connections 102…

vue项目打包获取git commit信息并输出到打包后的指定文件夹中

需求背景&#xff1a; 前端项目经常打包&#xff0c;发包部署&#xff0c;为了方便测试及运维发现问题时与正确commit信息对比 实现方式&#xff1a; 使用Node.js的child_process模块来执行git命令 实现步骤&#xff1a; 1.在package.json的同级目录下新建一个version.js文件。…

PyQt6的开发流程(密码生成小程序为例)

PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09; 文章目录 PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09;一、流程介绍与概览1. 界面与逻辑分离的开发流程2. PyQt6的开发流程 二、打开 designer.exe 创建文件三、用QT设计师绘制界面保存成ui1. QT常用…

springboot+vue网站开发-后端管理框架-vue-admin-template

为了方便国内用户下载&#xff0c;我把自己的百度网盘分享给大家一份地址&#xff0c;可以去下载。 如果你有上网盒子软件&#xff0c;那就自己去下载&#xff0c;很小。不到1MB. 链接&#xff1a;https://pan.baidu.com/s/15LJ2MoSWToFGFp28VaxBeQ?pwdbaby 提取码&#xff…

微服务-微服务链路追踪组件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 环境搭建部…

【数据处理】Python解析nii.gz文件

最近又接触了一种影像数据格式&#xff1a;nii.gz文件&#xff0c;记录一下python读取方式。 数据处理系列篇&#xff1a;   【数据处理】Python读取.mat文件的方法   【数据处理】Python读取.dcm文件的方法   【数据处理】Python解析json文件   【数据处理】Python解析…

日更【系统架构设计师知识总结3】存储系统

【原创精华总结】自己一点点手打、总结的脑图&#xff0c;把散落在课本以及老师讲授的知识点合并汇总&#xff0c;反复提炼语言&#xff0c;形成知识框架。希望能给同样在学习的伙伴一点帮助&#xff01;

HTTP与HTTPS-HTTPS 的应用数据是如何保证完整性的?

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTPS 的应用数据是如何保证完整性的? TLS 在实现上分为握手协议和记录协议两层 TLS 握手协议就是我们前面说的 TLS 四次握手的过程&#xff0c;负责协商加密算法和生成对称密钥&#xff0c;后续用此密…

信息安全计划

任何管理人员或人力资源专业人士都知道&#xff0c;除非彻底记录标准和实践&#xff0c;否则永远无法真正实施和执行标准和实践。正如您可能想象的那样&#xff0c;在保护您的网络、技术和数据系统免受网络威胁以及在发生这些事件时规划最及时、高效和有效的响应时&#xff0c;…

iview碰到的一些问题总结

iview tabs嵌套使用问题 tabs嵌套使用的时候不是直接套用行了&#xff0c;直接套用会出现内层tab都集成到一级tab去&#xff0c;需要设置该属性指向对应 Tabs 的 name 字段(需要版本大于3.3.1) <Tabs name"tab1" ><TabPane label"标签1" tab&qu…

荣耀手机如何开启地震预警功能

1、打开荣耀手机&#xff0c;进入“设置”&#xff0c;在搜素栏输入“地震”。 2、进入“安全-应急预警通知”功能栏。 3、开启“地震预警”。 4、查看“预警演示教程”。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e207e356bb634c11adf926c6a53e48cc.png…

Git 突破 文件尺寸限制

前言 当Git本地存储里右超过50MB&#xff0c;却又确实需要上传的时候&#xff0c;就需要用到了不是 解决 本代码就是把大文件进行拆解成小文件&#xff0c;然后上传。 等到拉取下来的时候&#xff0c;可以直接再进行合并&#xff0c;合并成原文件 代码如下&#xff0c;仅供…

深度学习基础(一)神经网络基本原理

之前的章节我们初步介绍了机器学习相关基础知识&#xff0c;目录如下&#xff1a; 机器学习基础&#xff08;一&#xff09;理解机器学习的本质-CSDN博客 机器学习基础&#xff08;二&#xff09;监督与非监督学习-CSDN博客 机器学习基础&#xff08;四&#xff09;非监督学…

python Matplotlib Tkinter-->tab切换2

环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 pillow 10.1.0 import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk import tkinter as tk import tkinter.ttk as ttk# 创建自定义工具栏类 c…

mapbox高德地图与相机

mapbox高德地图与相机 演示效果引入 CDN 链接地图显示 创建地图实例定义地图数据源配置地图图层 设置地图样式实现代码 1. 演示效果 本案例使用Mapbox GL JavaScript库创建高德地图。 2. 引入 CDN 链接 <script src"https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbo…

uniapp 使用安卓模拟器运行调试

uniapp 启动方式有很多种,这里介绍使用模拟器启动uniapp 要使用模拟器启动uniapp肯定少不了安装模拟器(废话) 这里选着浏览器推荐的第一个模拟器mumu模拟器 下载好了mumu安装包后就是安装了,这个过于小白,就不介绍了 2. 查看模拟器的adb端口号, mumu的adb查看端口号与众不同…

设计模式浅析(九) ·模板方法模式

设计模式浅析(九) 模板方法模式 日常叨逼叨 java设计模式浅析&#xff0c;如果觉得对你有帮助&#xff0c;记得一键三连&#xff0c;谢谢各位观众老爷&#x1f601;&#x1f601; 模板方法模式 概念 模板方法模式&#xff08;Template Method Pattern&#xff09;在Java中是…

探针台有哪些优势

探针台广泛应用于半导体、光电以及集成电路等行业&#xff0c;用于测试、调试和维修电子设备、电路板和芯片。 探针台具有以下优势&#xff1a; 1.能够确保相关产品研发的质量。 2.能够有效缩短研发时间和资金成本。 3.可以缩减器件的制作工艺成本。 4.具有更加可靠和省时…