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

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

原文地址:https://www.cnblogs.com/xiaoqi2018/p/10479508.html

时间: 2024-10-31 13:52:40

Vue router 全局路由守卫的相关文章

八、Vue Router 进阶-导航守卫

导航守卫 所谓的导航守卫,就是路由的钩子函数.主要用来通过跳转或取消导航.导航守卫分三种:全局.路由独享.组件级的. 注意:参数或查询的改变并不会触发进入和离开的导航守卫.可以通过watch监听$route对象,或使用beforeRouteUpdate的组件内守卫. 全局前置守卫 进入路由之前的钩子函数,接受next函数,在此可以阻止进入路由或跳转到指定路由. <script> const router = new VueRouter({ ... }); // 接收三个参数:to为目标路由对象

九、Vue Router 进阶-路由元信息meta

路由元信息 meta 在路由列表中,每个路由都有一个 meta元数据字段,我们可以在这里配置一些自定义信息,供页面组件或路由钩子函数中使用.在路由跳转的时候,提供我们判断条件. <script> // 配置 meta 数据 const router = new VueRouter({ routes: [ { path: '/', name: 'index', // 路由名称 component: index, // 映射的组件 meta: { title: '首页' } } ] }); <

vue全局路由守卫

在main.js里使用方法 router.beforeEach((to,from,next)=>{}) to,是将要跳转的路由, from,是上一个路由 next是个方法,判断to.path 或者 from.path ,如果符合条件,则允许跳转 例子: main.js router.beforeEach((to,from,next)=>{ if(to.path==="/about"){ alert("登陆后方可查看") }else{ next(); }

vue router动态路由

<div id="#app"> <router-link to="/user/header">路由1</router-link> /*指向user组件*/ <router-link to="/user/footer">路由2</router-link> /*指向user组件*/ /*当我们点击路由1得时候*/ /*------当我们点击路由2得时候*/ <router-view&g

六、Vue Router 嵌套路由

嵌套路由 在入口模板中设置的<router-view>是最顶层的出口.子组件中可以嵌套<router-view>为子路由匹配的出口. const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` } 要在嵌套的出口中

Vue 2.0 路由全局守卫

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫 你可以使用 router.beforeEa

vue动态添加路由addRoutes之不能将动态路由存入缓存

在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

vue2.0 实现导航守卫(路由守卫)---登录验证

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫 你可以使用 router.beforeEa

nuxtjs中使用路由守卫

在vue中的路由守卫一般是来验证token失效什么的,当然也可以设置权限啦,在nuxtjs中如何使用路由守卫呢,话不多说,直接上代码 在plugins目录下简历route.js export default ({ app }) => { app.router.afterEach((to, from) => { console.log(to.path) }) } 然后在 nuxt.config.js中添加配置plugins即可 plugins: [ '@/plugins/element-ui',