Vue Vue-route （6）-优快云博客

本文链接：https://blog.youkuaiyun.com/json_ligege/article/details/149290834

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

全局路由拦截

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

全局前置守卫

你可以使用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) {
    // 进行验证 本地存储中是否有token
    if (!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) {
    // 进行验证 本地存储中是否有token
    if (!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)
    }
  }
}