router路由守卫之用户权限

路由守卫一般用于判断用户是否登录，如果已登录，则进入页面，如果没有登录，则跳转到login页，并且记住跳转之前的路径页，方便登录成功后自动跳转到之前的页面。

router.beforeEach((to, from, next) => {
  const user = store.getters.user
  if (to.matched.some(r => r.meta.private) && !user) {
    next({
      name: 'login',
      params: {
        wantedRoute: to.fullPath,
      },
    })
    return
  }
  if (to.matched.some(r => r.meta.guest) && user) {
    next({ name: 'home' })
    return
  }
  next()
})

user 为从vuex中获取用户。

首先第一个if是判断当前的路由页面所有路由信息，matched是一个数组，它包含一个或者多个{}对象，对象为路由信息，我们就通过数组的some遍历这些对象，判断这些对象里面有没有我们预设的信息，假设我们给主页home设置的了一个meta。

这个meta对象里面有一个键值对为private:true；

用来表示这是个一个私人页面，你必须登录才能进入，所以我们在路由守卫的里面进行判断，当前页面有这个值，并且用户存在，才能next进入。

如果不存在则跳转到login，并且把当前路由页面的路径做为一个路由参数params对象的一个键值对传递wantedRoute: to.fullPath到下一个路由中

当用户登录成功，我们就可以从params获取到上一个路径，然后跳转回去。

第二个if用于判断，如果用户登录了，进入的却是一个只有来宾，也就是未登录时才能访问的页面，我们要自动跳到home页。

注意：

一定要有一个next，哪怕你写了很多if，也要有一个独立的next用于正常进入路由。

一般我们都是在vuex的action里面进行异步登录的

 actions: {
     async login({commit}) {
         try {
             const user = await $fetch("user");
             commit("user", user);
             if (user) {
                 router.replace(router.currentRoute.params.wantedRoute || {
                     name: 'home'
                 })
             }
         } catch (e) {
             console.warn(e);
         }
     },
     logout({commit}) {
         commit("user", null);
         $fetch('logout');
         if (router.currentRoute.matched.some(r => r.meta.private)) {
             router.replace({
                 name: 'login',
                 params: {
                     wantedRoute: router.currentRoute.fullpath
                 }
             })
         }
     }
 }

这里我们可以看到，我们login登录后，判断user是否存在，如果存在就进行replace跳转。

其中router.currentRoute.params.wantedRoute为我们之前在跳转到login页时存储的路径信息。

如果没有这个路径，我们就默认跳转至首页

退出的时候，我们要判断当前的路由页是否为私人页面，如果是，进行replace跳转，并且把当前的路由路径保存到params的键值对wantedRoute: router.currentRoute.fullpath