vue禁止右滑ios vue阻止页面跳转

登录拦截逻辑

第一步：路由拦截

首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。在路由管理页面添加meta字段

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

// 一种是通用页面路由 constantRoutes ；还有一种是动态路由 asyncRoutes
export const asyncRoutes =
  [
    {
      path: '/',
      component: Layout,
      redirect: '/projectmanange/noFiling',
    },
    //登录
    {
      path: '/login',
      component: () => import('@/views/login/index'),
      hidden: true
    },

    // 项目业绩管理
    {
      path: '/projectmanange',
      component: Layout,
      redirect: '/noFiling/index',
      meta: {
        title: '项目业绩管理',
        icon: 'el-icon-s-help',
      },
      children: [{
        path: 'noFiling',
        name: 'noFiling',
        component: () => import('@/views/projectmanange/noFiling/index'),
        meta: {
          title: '待归档项目列表',
          icon: 'el-icon-s-help',
          requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
        }
      },
      {
        path: 'filing',
        name: 'filing',
        component: () => import('@/views/projectmanange/filing/index'),
        meta: {
          title: '归档项目列表',
          icon: 'personnel',
          requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
        }
      },
      ]
    },
    //404
    {
      path: '/404',
      component: () => import('@/views/404'),
      hidden: true
    },

    {
      path: '*',
      redirect: '/404',
      hidden: true
    }
  ]

const createRouter = () => new Router({
  mode: 'hash',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: asyncRoutes
})

const router = createRouter()
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}

export default router

定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

所以在main.js加上

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (store.getters.token) { // 通过vuex state获取当前的token是否存在
      next();
    }
    else {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }
})

我需要进入页面的时候判断token是否存在，不存在的话要转登录页，所以在页面的页面上进行判断

import store from "@/store";

  mounted() {
    if (this.$route.meta.requireAuth) {
      // 判断该路由是否需要登录权限
      if (!store.getters.token) {
        // 通过vuex state获取当前的token是否存在
        this.$router.push("/login");
      }
    }
  },

每个钩子方法接收三个参数：

to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子，执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 （确认的）
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(‘/') 或者 next({ path: ‘/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

确保要调用 next 方法，否则钩子就不会被 resolved。

其中，to.meta中是我们自定义的数据，其中就包括我们刚刚定义的requireAuth字段。通过这个字段来判断该路由是否需要登录权限。需要的话，同时当前应用不存在token，则跳转到登录页面，进行登录。登录成功后跳转到目标路由。