nuxtjs如何通过路由meta信息控制路由查看权限

　　我们知道NUXTJS可以通过路由中间件进行路由鉴权，中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

　　但是我在实际使用过程中发现，中间件只有在路由跳转到路由中时才会进入，而在强制刷新网页时是不会进入的。

　　比如我有这样一个路由

  {
    path: '/guest',
    name: 'guest',
    component: guest,
    meta: {
      roles: ['ROLE_sys'],
      permission: 'event'
    }
  },

　　只有角色为sys，或者有event权限的用户才可以访问。如果在中间件里进行鉴权，从路由跳转进guest是会被阻挡，但是如果我直接在网页链接上修改路由为/guest，是不会阻挡，可以进页面的。

　　所以在此背景下，就只有通过nuxtjs提供的plugins来操作。

　　在plugins下建router.js用于鉴权

import { isIos, resolveToken, message } from '@/utils'
export default ({ app, store, redirect }) => {
  const token = store.getters.token
  // 判断userInfo是否存在
  if (token && !store.getters.userInfo) {
    store.dispatch('setUser')
  }

  // 判断配置项pick是否存在，不存在即请求获取
  if (!store.getters.pick) {
    store.dispatch('setPick')
  }
  if (isIos()) {
    store.commit('setWechatSignUrl', window.location.href)
  }

  app.router.afterEach((to, from, next) => {
    if (token) {
      // 判断是否有路由的查看权限
      const userInfo = resolveToken(token)
      let _per = userInfo.permissions
      let _meta = to.meta
      // 1、角色判断；2、权限判断
      if (
        (_meta.roles && !_meta.roles.includes(userInfo.roleName)) &&
        (_per && !_per.includes(_meta.permission))
      ) {
        message({
          message: '您无权访问此页面',
          type: 'error'
        })
        redirect('/')
      }
    }
  })
}

　　这里最主要说的就是afterEach方法。

　　起初路由鉴权一直都是使用beforeEach方法，但是因为nuxtjs是服务端渲染的，使用beforeEach，哪怕什么都不操作，不做路由重定向，也是会报server dom与client dom不匹配的问题，就会报错。

　　然后通过自己想了好久，使用afterEach就可以解决该问题。