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 提供了defineAsyncComponent 方法来实现此功能,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了ant design vue导航菜单与路由配置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue2.0 事件的广播与接收(观察者模式)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vue实现文件上传读取及下载功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
近期学习vue3的父子组件之间的传值,发现跟vue2.x的父子组件之间的传值并没有太大的区别,下面这篇文章主要给大家介绍了关于vue3父组件和子组件如何传值的相关资料,需要的朋友可以参考下2022-08-08
插槽（Slot）是Vue.js中一个非常重要的概念,它极大地提高了组件的复用性和灵活性,通过插槽,我们可以自定义组件的内容,使其能够适应不同的场景,本文将结合实际案例,详细介绍Vue中插槽的基本用法、类型以及高级技巧,需要的朋友可以参考下2024-11-11
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧2018-08-08
antd form表单使用setFildesValue 赋值失效的解决
这篇文章主要介绍了antd form表单使用setFildesValue 赋值失效的解决方案，具有很好的参考价值，希望对大家有所帮助。2023-04-04
这篇文章主要介绍了Vue render函数实战之实现tabs选项卡组件的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
最近接了个小活,其中甲方要求把vue项目打包成exe安装在windows上,其中有也会出现一些小问题和优化,特此记录,这篇文章主要给大家介绍了关于将vue项目打包成电脑端应用.exe的完整步骤,需要的朋友可以参考下2023-10-10
最新评论