Vue实现未登录跳转到登录页的示例代码
作者：迷糊MJ 发布时间：2023-07-02 17:02:49
标签：Vue,未登录,跳转
1、登录页登录成功时将服务端返回的标识存放起来
2、在router中给不需要登录的页面设置 meta : { auth : false }，如首页
3、使用路由前置守卫beforEach，由于给路由设置了meta : { auth : false }，如果是符合该属性时则不需要跳转登录页
4、接下来根据token是否存入到localstorage来进行判断或者cookie是否存入客户端做判断，这里在vuex中做处理
如果token和cookie不存在时则需要跳转到登录页
5、在axios中响应拦截response中做如下处理
先获取服务端返回未登录的状态码，根据这个状态码做判断并将token,cookie置空后跳转到登录页
总结：
1、 to.fullPath将跳转的路由path作为参数，登录成功后跳转到该路由
2、vue router中meta 字段代表路由元信息，可以通过meta对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理即可（此处是不需要跳转登录页）
3、路由前置守卫beforEach接受三个参数
（1）to: Route: 即将要进入的目标
（2）from: Route: 当前导航正要离开的路由
（3）next
4、axios全局 *
（1）请求 *
axios.interceptors.request.use（res=>{
//发送请求前要做的事儿，例如统一cookie、设置请求头header等
return res
}，(error)=>{
//请求发生错误时在这里处理
return Promise.reject(error)
}）
（2）响应 *
axios.interceptors.response.use(res=>{
//请求成功时对响应数据做处理，做数据统一处理，常处理登录失败与失效
return res
}，(error)=>{
//请求失败时在这里处理
return Promise.reject(error)
})
来源：https://blog.csdn.net/Mjxiaomihu/article/details/126362708
0
投稿猜你喜欢
初入深度学习，就遇到了困难，一直安装不了tensorflow和keras库！！！真是让人着急！！！在经过无数次尝试，看了无数篇博客之后，终于- 概述备份是容灾的基础，是指为防止系统出现操作失误或系统故障导致数据丢失，而将全部或部分数据集合从应用主机的硬盘或阵列复制到其它的
- 前言使用 requests进行爬取、BeautifulSoup进行数据提取。主要分成两步： 第一步是解析图书列表页，并解析出里面的图书详情页
- 很多时候我们写的程序，会花上一分钟甚至几分钟时间。为了使软件使用者能够耐心的等待程序的执行，我们经常会希望有一个进度条来表示程序执行的状态。
- 内容为空效果图为：填写内容效果图：下面是验证程序的代码：<!doctype html><html><head&
- 导言：当向类型化的数据集(Typed DataSet)添加一个TableAdapter时，相应的DataTable的构架已经由TableAd
- 这个东西算是我被这个shuffle坑了的一个总结吧！首先我得告诉你一件事，那就是pytorch中的tensor，如果直接使用random.s
- 本文实例讲述了Python基于opencv实现的简单画板功能。分享给大家供大家参考，具体如下：import cv2import numpy
- 关于Tensor的数据类型说明1. 32位浮点型：torch.FloatTensora=torch.Tensor( [[2,3],[4,8]
- cmp()方法返回两个数的差的符号： -1 如果 x < y, 0 如果 x == y, 或者 1 如果 x > y
- 废话不多说，直接开干!抖音字符视频在今年火过一段时间。反正我是始终忘不了那段刘耕宏老师本草纲目的音乐…这一次自己也来实
- PyQt5 MDI(多文档窗口)QMidArea简介一种同时显示多个窗口的方法是，创建多个独立的窗口，这些独立的窗口被称为SDI（Singl
- 目录概述语法定义接口实现接口空接口接口的组合总结概述Go 语言中的接口就是方法签名的集合，接口只有声明，没有实现，不包含变量。语法定义接口t
- 主要是用函数torch.nn.utils.rnn.PackedSequence()和torch.nn.utils.rnn.pack_padd
- 安装TensorFlow在Windows上，真是让我心力交瘁，想死的心都有了，在Windows上做开发真的让人发狂。首先说一下我的经历，本来
- 1.在pycharm下安装scrapy函数库2.将安装好scrapy函数库下的路径配置到系统path的环境变量中3.打开cmd终端输入：sc
- 当我们需要批量删除数据库中的表时，对于单个删除一些表是否感到烦躁，厌倦，干脆写个脚本用得了。本脚本使用游标循环删除，对于数量比较小，用游标暂
- 创建项目和应用django-admin startproject zqxt_views（项目名）cd zqxt_viewspython ma
- 0x01 生成shellcode首先通过下列命令生成一个shellcode，使用msfvenom -p选项来指定paylaod，这里选用wi
- 什么是PRC&GRPCRPC是远程过程调用（Remote Procedure Call）的缩写形式, RPC 的主要功能目标是让构建
