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 // 一、角色判断；二、权限判断
      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就能够解决该问题。