代码模版-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)