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
投稿
猜你喜欢
- 在 ASP 的内建对象中除了用于发送、接收和处理数据的对象外,还有一些非常实用的代表 Active Server 应用程序和单个
- 创建一张作者表,author,创建外键与book表,多对多关系 ,外键字段放在那张表都可以,class Author(models.Mode
- 学习Python数据分析挖掘实战一书时,在数据预处理阶段,有一节要使用拉格朗日插值法对缺失值补充,代码如下:#-*- coding:utf-
- 前言前几天在Python交流群里边,有个叫【^-^】的粉丝分享了一道Python基础的题目,跟快递信息有关的,题目如下:现在想要达到的效果如
- Python中核心的数据类型有哪些?变量(数字、字符串、元组、列表、字典)什么是数据的不可变性?哪些数据类型具有不可变性数据的不可变是指数据
- 如何随机显示图片计数器?一切就绪,看看我们的代码:count.asp< html >< head >
- 标量(scalar)数据类型标量(scalar)数据类型没有内部组件,他们大致可分为以下四类:. number. character. da
- 从这节算是开始进入“正规”的机器学习了吧,之所以“正规”因为
- 日常维护中,经常会碰到线程被阻塞,导致数据库响应非常慢,下面就看看如何获取是哪个线程导致了阻塞的。1. 环境说明RHEL 6.4 x86_6
- permute(dims)将tensor的维度换位。参数:参数是一系列的整数,代表原来张量的维度。比如三维就有0,1,2这些dimensio
- 在mysql中查询5条不重复的数据,使用以下:SELECT * FROM `table` ORDER BY RAND() LIMIT 5就可
- 针对之前win10下安装mysql的笔记进行了总结,分享给大家。1. 解压mysql-5.7.11-winx64.zip 到某文件夹, 如C
- 安装TensorFlow在Windows上,真是让我心力交瘁,想死的心都有了,在Windows上做开发真的让人发狂。首先说一下我的经历,本来
- 概述如果你已经阅读过上一个章节,那么你应该已经完成了充分的准备工作并且创建了一个很简单的具有如下文件结构的Web应用: 
- 前言系统自带的数据表格,使用时通过sns.load_dataset('表名称')即可,结果为一个DataFrame。prin
- Mysql 远程连接配置实现的两种方法大家在公司工作中,经常会遇到mysql数据库存储于某个人的电脑上,大家要想连接mysql服务,装有my
- 我们大家都知道MySQL数据库在安装完之后,默认的MySQL数据库,其最大连接数为100,一般流量稍微大一点的论坛或网站这个连接数是远远不够
- 1、生成器函数包含yield from表达式。2、在yield from表达式处暂停委派生成器,调用方可直接将数据发送给子生成器。3、子生成
- 一、记事本源码#python简易记事本from tkinter import *from tkinter import messagebox
- 我在前几天的博客中翻译了一篇《20个对学习CSS3大有裨益的资源》的文章,其中推荐了Get started with CSS 3,本文为其中