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就可以解決該問題。