vuejs全局路由守卫和组件内守卫的基础使用

最新推荐文章于 2025-10-18 11:29:18 发布

原创最新推荐文章于 2025-10-18 11:29:18 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

本文详细介绍VueJS中导航守卫的使用方法，包括安装vue-router、全局与组件内使用场景，通过实例演示如何实现基于token的登录验证。

vuejs导航守卫的使用场景

1、安装vue-router

npm install vue-router

2、在需要使用组件引入

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

接下来就可以开始一些基础的使用啦~

3、全局使用场景

一般来说，想要进入某个网站或者系统的个人中心页面都是需要用户先进行登录操作的，我们暂时先用这个来举个小例子吧！这里用token来验证是否登录

// router文件
// index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from 'components/Index/index.vue'
import Center from 'components/Login/index.vue'
import Detail from 'components/Index/detail.vue'
// 根据自己的项目需要引入文件
Vue.use(VueRouter)
export default new vueRouter({
  routes: [{
    path: '/',
    component: Index
  }, {
    path: '/Detail',
    component: Detail,
    meta: {
      requireLogin: 2
    }
  }, {
    path: '/Center',
    component: Center,
    meta: {
      requireLogin: 1
    }
  }]
})

// main.js
// 全局路由守卫
// 这是你书写所需要的路由的文件路径，把它引过来
import router from './router'
router.beforeEach((to, from, next) => {
  // 这个token是存储在localStorage
  let token = window.localStorage.getItem('token')
  if (to.meta.requireLogin && to.meta.requireLogin === 1) {
	if (token) {
	  next()
	} else {
	  next('/')
	}
  } else if (to.meta.requireLogin && to.meta.requireLogin === 2) {
     if (token) {
       next('/center')
     } else {
       next()
     }
  } else {
  	next()
  }
})

**meta是路由元信息

4、组件内使用场景

依然依赖上面的router文件

// js部分
// 随便你写点啥，头尾就先省略吧~
<script>
export default {
  data () {
    return {
      // 内容就省啦~重点往下看
    }
  },
  beforeRouteEnter: (to, from, next) => {
    // 组件内守卫
    next(vm => {
      // judge login
      let token = window.localStorage.getItem('token')
      if (to.meta.requireLogin && to.meta.requireLogin === 1) {
        if (token) {
          next()
        } else {
        // 不满足条件就要去进行登录操作
          next('/login')
        }
      } else if (to.meta.requireLogin && to.meta.requireLogin === 2) {
        if (token) {
          next('/')
        } else {
          next()
        }
      } else {
        next()
      }
    })
  }
}
</script>

emmmm,暂时就先来这两个吧~其他的后面有空了再加上来。
有不妥之处，大佬有更好的代码优化建议希望大佬不吝告知。不喜勿喷~