vue实现未登录访问其他页面自动跳转登录页功能(实现步骤)

更新时间：2023年07月17日 11:13:27 作者：abcnull

这篇文章主要介绍了vue实现未登录下访问其他页面自动跳转登录页,本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

简介

未登录下，访问一些页面是不被允许或者说也没什么作用，所以需要自动导向/login页面

步骤一：依赖安装

一般需要借助 cookie 判定，也需要使用关键到 vue-router

cnpm install vue-router --save
cnpm install vue-cookies --save

步骤二：补充 router 拦截代码

这里有前置条件：

你已经写好了登录页面组件，包括登录后 js 中怎么存储 cookies
你已经配置好 router/index.js 中 router，并在 main.js 中成功 use 这个 router

然后你只需要在 utils/index.js 这个 router 声明代码中加上

import { createRouter, createWebHistory} from "vue-router"
import VueCookies from "vue-cookies";
// 异步的，路由到某个页面之前拦截先做些处理，这里处理未登录下所有页面请求都转向请求登录页
router.beforeEach((to, from, next) => {
    if (!VueCookies.get("userInfo") && to.path !== "/login") {
        router.push("/login")
    }
    next()
})

额外

router.beforeEach是Vue Router提供的一个全局前置守卫，它允许您在导航发生之前执行一些逻辑。它可以用来进行路由权限控制、路由拦截、页面统计等操作

router.beforeEach接收一个回调函数作为参数，这个回调函数会在每次路由导航之前被执行。回调函数接收三个参数：

to：即将要进入的路由对象
from：当前导航正要离开的路由对象
next：调用该方法后，才能进入下一个钩子。其中next有三种调用方式：next()、next(false)、next(path)

到此这篇关于vue实现未登录下访问其他页面自动跳转登录页的文章就介绍到这了,更多相关vue未登录跳转登录页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue实现手机号、验证码登录（60s禁用倒计时）
这篇文章主要介绍了Vue实现手机号、验证码登录（60s禁用倒计时），帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12
vue制作抓娃娃机的示例代码
这篇文章主要介绍了vue制作抓娃娃机，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue.js开发环境搭建
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。本文给大家介绍Vue.js开发环境搭建的详解讲解，感兴趣的朋友一起看看吧
2016-11-11
Vue3指令之搜索框输入防抖功能实现
在Vue开发中遇到了搜索框输入防抖处理,算是防抖的使用场景之一吧,这篇文章主要给大家介绍了关于Vue3指令之搜索框输入防抖功能实现的相关资料,需要的朋友可以参考下
2022-12-12
Vue父子组件方法this.$emit()有时候不触发问题及解决
这篇文章主要介绍了Vue父子组件方法this.$emit()有时候不触发问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
详解vue-cli快速构建vue应用并实现webpack打包
这篇文章主要介绍了详解vue-cli快速构建vue应用并实现webpack打包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
如何理解Vue的v-model指令的使用方法
这篇文章主要介绍了如何理解Vue的v-model指令的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
详解vue项目的构建，打包，发布全过程
小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程，文章很以后价值，值得你参考。
2017-11-11
Vue与Axios的传参方式实例详解
现在vue项目基本上都是使用axios进行请求操作,下面这篇文章主要给大家介绍了关于Vue与Axios的传参方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
Vue NextTick介绍与使用原理
我们对Vue中data数据的修改会导致界面对应的响应变化，而通过nextTick方法，可以在传入nextTick的回调函数中获取到变化后的DOM，讲起来可能还是有点梦幻，下面我们直接使用nextTick体验一下效果
2022-08-08