分享一下今天做Vue项目中使用全局路由守卫（也叫做路由导航钩子函数）进行全局控制登录。

二话不说,上代码：
在main.js文件中写代码

//使用vue-router
import router from './router'
//使用vuex状态管理仓库
import store from '../store/store'
//使用vue-cookies 用来获取cookies
import VueCookies from 'vue-cookies'

// 全局路由守卫
router.beforeEach((to, from, next) => {
//判断是否存在LoginUser这个cookie
//有的话说明用户已经处于登录状态
  if (VueCookies.get('LoginUser')) {
  //vuex中Islogin默认为flase（未登录），此时需提交更改将其值改为true
  //表示处于登录状态
    store.commit('setIslogin', true)
  }
 
  if (to.path === '/login') { //判断要进入的路由是否为登录页面路由
    next()
  } else if (store.state.IsLogin) {
    next()
  } else {
    next('/login')
  }
})

ok，看到这里基本都了然了吧。

需要提一下的是在main.js中使用vuex和在组件中使用vuex有一点小小的不同之处
在组件中可以使用this.$store.state；this.$store.commit()等对vuex中的数据进行操作。在main.js中可以直接这样写store.state；store.commit()就可以对vuex中的数据进行操作了。
不要问我为什么，亲测有效，哦哈哈哈。
当然其他类似的也可以这样做，比如我这里面用到的vue-cookies，在组件中this.$cookies.remove();this.$cookies.get()这样操作cookies
在main.js中用的话直接VueCookies.get();VueCookies.remove()就可以了。

ok，分享这些，与大家交流探讨。