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未登录跳转登录页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Lottie 是一个由 Airbnb 开源的动画库,它允许你在 Web、iOS、Android 等平台上使用体积小、高性能的体验丰富的矢量动画,本文将详细介绍在 Vue 项目中如何集成和使用 Lottie,文中有详细的代码讲解,需要的朋友可以参考下2023-11-11
Vue的filters过滤器是比较常见的一个知识点，下面我将结合时间戳转换的例子带你快速了解filters的用法，感兴趣的朋友一起看看吧2021-09-09
在本篇文章里小编给大家整理了一篇关于vue中4个自定义指令讲解及实例用法，有兴趣的朋友们可以跟着学习下。2021-12-12
这篇文章主要为大家详细介绍了Vue实现摇一摇功能，兼容ios13.3以上，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要为大家介绍了vue的生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了详解VueJS 数据驱动和依赖追踪分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
element table数据量太大导致网页卡死崩溃的解决办法
当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,下面这篇文章主要给大家介绍了关于element table数据量太大导致网页卡死崩溃的解决办法,需要的朋友可以参考下2023-02-02
在本篇文章和里小编给各位总结了关于vue路由跳转传递参数的三种方式以及相关代码，需要的朋友们可以学习下。2020-05-05
这篇文章主要介绍了使用Vue.js和MJML创建响应式电子邮件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
解决electron打包vue-element-admin项目页面无法跳转的问题小结
这篇文章主要介绍了解决electron打包vue-element-admin项目页面无法跳转的问题小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
最新评论