Vue router 全局路由守卫

Posted xiaoqi2018

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue router 全局路由守卫相关的知识,希望对你有一定的参考价值。

记录一下全局路由守卫的使用;

  方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转

import Vue from ‘vue‘
import Router from ‘vue-router‘
import store from ‘./../store‘

import Home from ‘components/home/home‘ // 主页组件

// 其它组件...

import Cart from ‘components/cart/cart‘ // 购物车组件
import User from ‘components/user/user‘ // 用户中心组件

// 其他组件...

import GoodsDetail from ‘components/goods-detail/goods-detail‘ // 商品详情组件

import { localTake } from ‘common/js/localStore‘ // 本地存储方法封装

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: ‘/‘, // 默认地址
      redirect: ‘/home‘
    },
    {
      path: ‘/home‘,
      component: Home,
      name: ‘Home‘,
      meta: {
        title: ‘主页‘,
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: ‘/cart‘,
      component: Cart,
      name: ‘Cart‘,
      meta: {
        title: ‘购物车‘,
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: ‘/user‘,
      component: User,
      name: ‘User‘,
      meta: {
        title: ‘我的‘,
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: ‘/user-login‘,
      component: UserLogIn,
      name: ‘UserLogIn‘,
      meta: {
        title: ‘登录‘,
        keepAlive: false // 不需要被缓存
      }
    },
    {
      path: ‘/goods-detail‘,
      component: GoodsDetail,
      name: ‘GoodsDetail‘,
      meta: {
        title: ‘商品详情‘,
        keepAlive: true // 需要被缓存
      }
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {x: 0, y: 0}
    }
  }
})

// 全局路由守卫
router.beforeEach((to, from, next) => {
  const nextRoute = [‘User‘, ‘Cart‘, ‘GoodsDetail‘] // 需要登录的页面
  let isLogin = localTake(‘userMsg‘)  // 判断是否登录,本地存储有用户数据则视为已经登录
  // 未登录状态;当路由到 nextRoute 指定页时,跳转至 UserLogIn
  if (nextRoute.indexOf(to.name) >= 0) { // 检测是否登录的页面
    if (!isLogin) { // 如果未登录(本地存储无用户数据),并且要跳到登录页面
      if (from.name === ‘UserLogIn‘) {
        next(‘/‘)
        return
      }
    // 登录后,跳到到当前页面
      router.push({
        name: ‘UserLogIn‘,
        params: {redirect: to.fullPath}  
      })
    }
  }
  // 已登录状态;当路由到 UserLogIn 时,跳转至 Home
  if (to.name === ‘UserLogIn‘) {
    if (isLogin) {
      next(‘/‘)
      return
    }
  }
  next() // 必须使用 next ,执行效果依赖 next 方法的调用参数
})

export default router

  方法二:通过定义to.meta.needLogin(needLogin 为自定义,路由元信息),判断是否需要登录

 

import Vue from ‘vue‘
import Router from ‘vue-router‘
import store from ‘./../store‘

import Home from ‘components/home/home‘ // 主页组件

// 其它组件...

import Cart from ‘components/cart/cart‘ // 购物车组件
import User from ‘components/user/user‘ // 用户中心组件

// 其他组件...

import GoodsDetail from ‘components/goods-detail/goods-detail‘ // 商品详情组件

import { localTake } from ‘common/js/localStore‘ // 本地存储方法封装

Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: ‘/‘, // 默认地址
      redirect: ‘/home‘
    },
    {
      path: ‘/home‘,
      component: Home,
      name: ‘Home‘,
      meta: {
        title: ‘主页‘,
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: ‘/cart‘,
      component: Cart,
      name: ‘Cart‘,
      meta: {
        title: ‘购物车‘,
        keepAlive: true, // 需要被缓存
        needLogin: true // 需要登录 
      }
    },
    {
      path: ‘/user‘,
      component: User,
      name: ‘User‘,
      meta: {
        title: ‘我的‘,
        keepAlive: true, // 需要被缓存
        needLogin: true // 需要登录
      }
    },
    {
      path: ‘/user-login‘,
      component: UserLogIn,
      name: ‘UserLogIn‘,
      meta: {
        title: ‘登录‘,
        keepAlive: false // 不需要被缓存
      }
    },
    {
      path: ‘/goods-detail‘,
      component: GoodsDetail,
      name: ‘GoodsDetail‘,
      meta: {
        title: ‘商品详情‘,
        keepAlive: true, // 需要被缓存
        needLogin: true // 需要登录
      }
    }
  ]
})
// 全局路由守卫
router.beforeEach((to, from, next) => {
  let isLogin = localTake(‘userMsg‘) 
  if (to.meta.needLogin) {  // 判断该路由是否需要登录权限
    if (isLogin) { // 判断是否已经登录
      next()
    }
    else {
      next({
        path: ‘/login‘,
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  }
  else {
    next()
  }
})


export default router

推荐使用判断路由元信息的方法,代码比较简洁,能更好的维护与管理

以上是关于Vue router 全局路由守卫的主要内容,如果未能解决你的问题,请参考以下文章

vue-router路由导航守卫

Vue路由守卫(全局路由守卫、路由独享守卫、组件内部守卫)

vue-router 方法总结

路由vue-router进阶

vue-router 鉴权 守卫

vue路由守卫详解