Vue-router-路由守卫

Vue-路由守卫

路由守卫有点像是Java中的Filter过滤器，它可以在路由页面切换前后去执行一些功能代码

• 全局前置守卫：在路由切换前被调用，可以用于验证用户登录、中断导航、请求数据等
• 全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作Dom、记录日志等

守卫代码写在 router.js文件中

---

全局守卫

每次路由切换页面前，都会执行beforeEach中的回调函数

回调函数提供三个参数：

• to：下一个页面，到哪里去

• from：上一个页面，从哪里来

• next：放行的方法，只有执行了该方法，才会放行路由

  • next()：放行
  • next(/路径)：路径的重定向
  • 为避免死循环问题，必须在判断分支下使用next(/路径)对路由进行重定向

这三个参数的顺序不能变，一定得是to,from,next

next()的作用就像是filter中的filterChain.doFilter(servletRequest, servletResponse);

to和from是两个对象，调用其path属性即可打印路径

全局前置守卫

router.beforeEach(
    (to, from, next) => {
        console.log(to.path)
        console.log(from.path)
        next()
    }
)

全局后置守卫

router.afterEach(
    (to, from) => {

    }
)

---

守卫练习

Login.vue

建立登陆组件，写一些功能

<script setup>
import { ref } from 'vue';
let username = ref("")
let password = ref("")

import {useRouter} from "vue-router"
const router = useRouter()
// 获取用户名和密码 匹配后则跳转 /home
// 登陆失败，不跳转页面
function login(){
    if(username.value == "xiaobai" && password.value == "123456"){
        //路由跳转 /home
        router.push("/home")
        //将用户名保存在浏览器上
        window.sessionStorage.setItem("username",username.value)
    }else{
        alert("用户名或者密码错误")
    }
}
</script>

<template>
  <div>
      账号: <input type="text" v-model="username"> <br>
      密码: <input type="password" v-model="password">
      <button @click="login()">登录</button>
  </div>
</template>

<style scoped>

</style>

---

Home.vue

建立一个home组件，写一些功能

<script setup>
import {useRouter} from "vue-router"
const router = useRouter()

let username = window.sessionStorage.getItem("username")

function logout(){
    // 清除sessionStore中的用户登录信息
    window.sessionStorage.removeItem("username")
    // 跳转到Login视图
    router.push("/login")
}

</script>

<template>
  <div>
      <h1>home页面</h1>
      <h3>欢迎{{username}}登录</h3>
      <button @click="logout">退出登录</button>
  </div>
</template>

<style scoped>

</style>

---

router.js

建立router.js，编写路由规则和路由守卫

import {createRouter,createWebHashHistory} from 'vue-router'

import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:"/home",
            component:Home
        },
        {
            path:"/login",
            component:Login
        }
    ]
}
)

//通过路由的前置守卫控制校验登录
router.beforeEach((to, from, next) => {
    if (to.path == '/login') {
        //判断如果是登录，就直接放行即可
        next();
    }else{
        //如果是其他资源，都要在登陆之后才放行，如果没登陆，则重定向到登陆视图
        const username = sessionStorage.getItem("username")
        if(null != username)
            next()
        else{
            next("/login")
        }
    }
    
});
export default router

---