前言

最近一直在忙著一個用vue來做的權限管理的項目，其實在此之前，我也研究過vue的權限如何實現，并且也為之寫過一篇博客，但當真正應用在項目中的時候，還是發現了許多問題，所以此篇也會就著我在項目中遇到的一些問題，拿出來和大家分享一下，當然示例代碼還是我的github倉庫中的ant-design-vue-ms （本地下載）。

權限問題解決思路

對于一個前后端分離的項目而言，權限不再是僅僅靠后端來控制，后端只能控制接口的權限，前臺的頁面顯示還是需要我們來控制，針對vue的項目，首先我想的是當權限不多，并且都是單個權限的情況下，我們完全沒有必要使用vue中提供的addRoutes的方法，可以使用動態組件來做，即我們根據后端返回的角色，來細度控制動態組件的顯示內容，所謂動態組件其實就是vue內置提供的component組件

<component :is="currentComponent"/>

相信看到這里，熟悉的同學應該已經想起來了，這樣的話，我們就不需要用到vuex，以及路由配置等等復雜的問題，單純靠后臺返回的角色名稱就能解決所有的問題了，看到這里是不是覺得今天的內容就這些了，別著急，下面還有“好看的”。

權限設置中的問題

這樣雖然能解決一些簡單權限的問題，但是針對稍微復雜一些的權限應用，就顯得有些力不從心了，當角色過多，并且還包含了混合角色的權限的話，則會衍生出很多問題，這里也是列舉我遇到的一些問題，同學們可以細細推敲一下。

所以綜上所述，最終我還是選擇了傳統的addRoutes，那么肯定會有同學問了，既然這個方案不行，那干嘛還要用呢。問得好，其實動態組件就是一種嘗試，只有知道錯了，不滿足需求了，我們才能更知道為什么會去使用傳統的addRoutes的權限方案。

權限問題解決方法

所以我們來看看addRoutes帶來的一些“好處”：