路由导航守卫

• 进行任何的路由跳转之前，传入beforeEach中的函数都会被回调

• vue-router提供的导航首位主要用来通过跳转或取消的方式守卫导航

• 全局的迁至后卫beforeEach是在导航触发时会被回调的

• 它有两个参数：

  • to：即将进入的路由Route对象
  • from：即将离开的Route对象

• 它有返回值：

  • false：取消当前导航
  • 不返回或则和undefined：进行默认导航
  • 返回一个路由地址：
    • 可以是一个string类型的路径
    • 可以是一个对象，对象中包含path、query、params等信息

进入到某页面时，跳转到login界面

router.beforeEach((to, from) => {
    if (to.path == '/user') {
        return '/login'
    }
})

判断用户是否登录

router.beforeEach((to, from) => {
    const token = localStorage.getItem("token")
    if (!token && to.path === "/user") {
        return "/login"
    }

<template>
    <h2>登录界面</h2>
    <button @click="login">登录</button>
</template>

<script setup>
    import { useRouter } from 'vue-router';

    const router = useRouter()

    function login() {
        localStorage.setItem("token", 123456)
        router.push("/user")
    }

    function logout() {
        localStorage.removeItem("token")
    }
</script>