需要用到vuex和路由全局前置守衛(wèi)router.beforeEach以及路由操作router.addRoutes共同完成
首先我們的views目錄結(jié)構(gòu)為
其中我們?cè)O(shè)定Home頁(yè)面以及Private頁(yè)面不需要權(quán)限均可訪問(wèn)，其余的為有權(quán)限才可以訪問(wèn)。
設(shè)定router里面的路由為
定義asyncRouterMap為異步路由表器仗，也是我們需要權(quán)限才可以訪問(wèn)的內(nèi)容儒恋。
既然要設(shè)定權(quán)限必然需要路由的前置導(dǎo)航守衛(wèi)涩禀，新建文件permission.js和main.js同級(jí)祈远。
在store里面為
代碼里面的注釋已經(jīng)很詳細(xì)了挠铲，不一一解釋了筹误。需要代碼可以訪問(wèn)https://gitee.com/brave-uncle-qin/pro_cms.git
這樣我們就實(shí)現(xiàn)了權(quán)限的設(shè)置，沒(méi)有頁(yè)面的訪問(wèn)權(quán)限逊笆，即使知道路由栈戳，也是訪問(wèn)不到的。關(guān)于跳轉(zhuǎn)按鈕的隱藏設(shè)置就要用到自定義指令去設(shè)置了难裆。
在使用過(guò)程中子檀，可能會(huì)遇到后臺(tái)返回的層級(jí)列表，這樣也是可以在此基礎(chǔ)上去更改乃戈。需要更改filterAsyncRouter這個(gè)方法褂痰。可以根據(jù)不同的需求去設(shè)置症虑。
