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就能夠解決該問題。