zoukankan      html  css  js  c++  java
  • vue --- 全局守卫

    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;
  • 相关阅读:
    4.异常捕获后再次抛出
    图像滤镜处理算法:灰度、黑白、底片、浮雕
    JAVA层和JNI层实现Bitmap图镜像功能。
    关于ARGB_8888、ALPHA_8、ARGB_4444、RGB_565的理解
    镜象变换的源代码
    android 图像处理(黑白,模糊,浮雕,圆角,镜像,底片,油画,灰白,加旧,哈哈镜,放大镜)
    android获取项目下的一张图片的绝对路径问题以及解决方法
    fwrite用法
    关于毁灭地球
    memset,memcpy
  • 原文地址:https://www.cnblogs.com/yuerdong/p/9144045.html
Copyright © 2011-2022 走看看