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未登录跳转登录页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！