vue2.0 实现导航守卫(路由守卫)

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。

对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。

导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。

全局守卫

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

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
// ...
})

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

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

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

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

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

下面写一个例子:

  1. 列举需要判断登录状态的“路由集合”,当跳转至集合中的路由时,如果“未登录状态”,则跳转到登录页面LoginPage;
  2. 当直接进入登录页面LoginPage时,如果“已登录状态”,则跳转到首页HomePage;
  3. import Vue from 'vue';
    import Router from 'vue-router';
    import LoginPage from '@/pages/login';
    import HomePage from '@/pages/home';
    import GoodsListPage from '@/pages/good-list';
    import GoodsDetailPage from '@/pages/good-detail';
    import CartPage from '@/pages/cart';
    import ProfilePage from '@/pages/profile'; Vue.use(Router) const router = new Router({
    routes: [
    {
    path: '/', // 默认进入路由
    redirect: '/home' //重定向
    },
    {
    path: '/login',
    name: 'login',
    component: LoginPage
    },
    {
    path: '/home',
    name: 'home',
    component: HomePage
    },
    {
    path: '/good-list',
    name: 'good-list',
    component: GoodsListPage
    },
    {
    path: '/good-detail',
    name: 'good-detail',
    component: GoodsDetailPage
    },
    {
    path: '/cart',
    name: 'cart',
    component: CartPage
    },
    {
    path: '/profile',
    name: 'profile',
    component: ProfilePage
    },
    {
    path: '**', // 错误路由
    redirect: '/home' //重定向
    },
    ]
    }); // 全局路由守卫
    router.beforeEach((to, from, next) => {
    console.log('navigation-guards');
    // to: Route: 即将要进入的目标 路由对象
    // from: Route: 当前导航正要离开的路由
    // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
    let isLogin = global.isLogin; // 是否登录 从后台获取 token
    // 未登录状态;当路由到nextRoute指定页时,跳转至login
    if (nextRoute.indexOf(to.name) >= 0) {
    if (!isLogin) {
    console.log('what fuck');
    router.push({ name: 'login' })
    }
    }
    // 已登录状态;当路由到login时,跳转至home
    if (to.name === 'login') {
    if (isLogin) {
    router.push({ name: 'home' });
    }
    }
    next();
    }); export default router;

vue --- 全局守卫的更多相关文章

  1. 添加一个vue全局守卫,主要用于用户登录时候验证

    //注册一个全局守卫,作用是在路由跳转钱,对路由进行判断,防止未登录用户跳转到其他页面 router.beforeEach((to, from, next) => { let token = l ...

  2. Vue 2.0 路由全局守卫

    vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...

  3. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  4. [Vue]导航守卫:全局的、单个路由独享的、组件级的

    正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...

  5. vue路由守卫应用,监听是否登录

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  6. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  7. vue路由守卫用于登录验证权限拦截

    vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...

  8. vue全局配置----小白基础篇

    今天学习vue全局配置.希望帮助我们去了解vue的全局配置,快速开发. Vue.config是vue的全局配置对象.包含Vue的所有全局属性: silent:boolean(默认值:false)--- ...

  9. vue全局使用axios插件请求ajax

    vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...

随机推荐

  1. jsp留言板雏形

    编写一个简单的留言簿,实现添加留言和显示留言内容的功能 <%@ page language="java" contentType="text/html; chars ...

  2. js base64加密与C#后台base64解密

    js代码 function encode64(input) { var output = ""; var base = new Base64(); var output = bas ...

  3. VS Code(Visual Studio Code)

    这次推荐 VS Code,这是个跨平台.免费的代码编辑器,集成开发.调试.编译为一身.单成启动速度,资源占用,就已经赢了各大编辑器(什么 SB.N++之类).以前觉得 VS 2015 是宇宙最强编辑器 ...

  4. HDU 1240 Asteroids!【BFS】

    题意:给出一个三维的空间,给出起点和终点,问是否能够到达终点 和上一题一样,只不过这一题的坐标是zxy输入的, 因为题目中说的是接下来的n行中分别是由n*n的矩形组成的,所以第一个n该是Z坐标,n*n ...

  5. 「POJ3237」Tree(树链剖分)

    题意 给棵n个点的树.边有边权然后有三种操作 1.CHANGE i v 将编号为i的边权变为v 2.NEGATE a b 将a到b的所有边权变为相反数. 3.QUERY a b 查询a b路径的最大边 ...

  6. [POI2009]KON-Ticket Inspector(二维前缀和+DP)

    题意 有n个车站,现在有一辆火车从1到n驶过,给出aij代表从i站上车j站下车的人的个数.列车行驶过程中你有K次检票机会,所有当前在车上的人会被检票,问最多能检多少个不同的人的票 (n<=600 ...

  7. Generational GC (Part one )

    目录 什么是分代垃圾回收 对象对的年龄 新生代对象和老年对象 Ungar的分带垃圾回收 堆的结构 记录集 写入屏障 对象的结构 分配 新生代GC 幸存空间沾满了怎么办? 老年代GC 优缺点 吞吐量得到 ...

  8. vSphere VCSA5.5加入AD域环境问题记录

    vSphere VCSA5.5加入AD域环境问题记录 实验目的: 搭建一套vSphere VCSA5.5,并加入新搭建的AD域,并使用一个域用户登录VC,赋予对VC的只读权限. 实验环境: 使用VMW ...

  9. Python实现快排

    Python实现快排 def quicksort(arr): if len(arr) <= 1: return arr pivot = arr[len(arr) // 2] left = [x ...

  10. C#开发奇技淫巧二:根据dll文件加载C++或者Delphi插件

    原文:C#开发奇技淫巧二:根据dll文件加载C++或者Delphi插件 这两天忙着把框架改为支持加载C++和Delphi的插件,来不及更新blog了.      原来的写的框架只支持c#插件,这个好做 ...