当前位置：首页 > news >正文

Vue Vue-route （6）

news 2025/7/13 6:27:49

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue-route 全局和局部路由拦截及应用

全局路由拦截

全局前置守卫

设置全局拦截

是否授权

是否授权逻辑

路由元信息

实现授权验证

登录处理

创建login页面

设置login路由

编辑优化登录返回

局部路由拦截

路由独享守卫

组件内的守卫

总结

全局路由拦截

具体应用为：判断是否登录，未登录，跳转去登录；已登录，则继续执行原有请求。

全局前置守卫

你可以使用router.beforeEach注册一个全局前置守卫：

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。

每个守卫方法接收三个参数：

to: Route 即将要进入点的目标路由对象

from: Route 当前导航正要离开的路由

next: Function 一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数

设置全局拦截

在vue中设置全局前置拦截，在router/index.js路由配置设置：

to 去哪

from 从哪来

next 继续执行

是否授权

是否授权逻辑

通过全局拦截，判断是否授权逻辑。

示例如下：

不需要验证登录实现如下：

路由元信息

在路由中设置自定义的meta 字段：

实现授权验证

在router/index.js中对需要验证的路由，增加meta字段设置：

{path: '/center',name: 'center',component: Center,meta: {isLoginRequired: true}}

在router/index.js中验证meta。

示例如下：

// 全局拦截（守卫）
router.beforeEach((to, from, next) => {console.log(to)if (to.meta.isLoginRequired) {// 进行验证 本地存储中是否有tokenif (!localStorage.getItem('token')) {next('/login')}}next()
})

登录处理

创建login页面

创建LoginView.vue页面并处理登录业务处理。

示例如下：

<template><div>login<button @click="handleLogin">登录</button></div>
</template>
<script>
export default {methods: {handleLogin () {setTimeout(() => {localStorage.setItem('token', '后端返回的token字段')// this.$router.back() //返回this.$route.push('/center')}, 0)}}
}
</script>

设置login路由

在router/index.js中设置登录的路由配置。

示例如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/views/FilmsView'
import Cinemas from '@/views/CinemasView'
import Center from '@/views/CenterView'
import NowPlaying from '@/views/films/NowPlaying'
import ComingSoon from '@/views/films/ComingSoon'
import Search from '@/views/SearchView'
import Detail from '@/views/DetailView'
import Login from '@/views/LoginView'Vue.use(VueRouter) // 注册路由插件// 配置表
const routes = [{path: '/films',name: 'films',component: Films,children: [{path: '/films/nowplaying',component: NowPlaying},{path: '/films/comingsoon',component: ComingSoon},{path: '/films',redirect: '/films/nowplaying'}]},{path: '/detail/:id', // 动态路由name: 'detail', // 命名路由component: Detail},{path: '/cinemas',name: 'cinemas',component: Cinemas},{path: '/cinemas/search',name: 'search',component: Search,meta: {isLoginRequired: true}},{path: '/center',name: 'center',component: Center,meta: {isLoginRequired: true}},{path: '/login',name: 'login',component: Login},{path: '*',component: Films}
]
......

请求搜索效果：

优化登录返回

全局拦截中设置 query；登录后，返回原有要请求路径。

示例如下：

// 全局拦截（守卫）
router.beforeEach((to, from, next) => {console.log(to)if (to.meta.isLoginRequired) {// 进行验证 本地存储中是否有tokenif (!localStorage.getItem('token')) {next({path: '/login',query: { redirect: to.fullPath }})}}next()
})

登录完成后，返回原有将要请求路径。

export default {methods: {handleLogin () {setTimeout(() => {localStorage.setItem('token', '后端返回的token字段')// this.$router.back() //返回// 获取query字段中的路由进行跳转this.$router.push(this.$route.query.redirect)}, 0)}}
}