vue-router中怎么實(shí)現(xiàn)權(quán)限控制，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),肇源企業(yè)網(wǎng)站建設(shè),肇源品牌網(wǎng)站建設(shè),網(wǎng)站定制,肇源網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,肇源網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

在vue-router控制前端權(quán)限是常見(jiàn)需求：

1. 有一種做法是直接在后端完成判斷，提供頁(yè)面列表和操作列表，在前端進(jìn)行渲染，但這個(gè)方案并不優(yōu)雅，前后端耦合度比較高。

2. 比較常見(jiàn)的做法是把登錄頁(yè)面獨(dú)立在router之外，專(zhuān)門(mén)寫(xiě)一個(gè)權(quán)限控制文件，在登錄之后根據(jù)用戶(hù)權(quán)限加載router，之后把權(quán)限作為參數(shù)傳入各種組件中，以控制元素的渲染。這個(gè)方法比較合理，沒(méi)有什么額外的開(kāi)銷(xiāo)，只是需要獨(dú)立寫(xiě)一個(gè)登錄頁(yè)面和權(quán)限控制文件比較麻煩一些，特別是對(duì)一些小項(xiàng)目而言。

我們希望還有更簡(jiǎn)單的方式。這個(gè)時(shí)候梳理一下需求，我們的主要目標(biāo)是：

1. 菜單欄控制，根據(jù)權(quán)限渲染可以進(jìn)入的頁(yè)面菜單；

2. 操作按鈕權(quán)限控制，沒(méi)有操作權(quán)限的不予顯示；

3. 如果有人通過(guò)直接點(diǎn)擊鏈接或輸入地址進(jìn)入沒(méi)有權(quán)限的頁(yè)面，則進(jìn)行攔截；

第一、第二個(gè)目標(biāo)是容易實(shí)現(xiàn)的，把權(quán)限列表傳入對(duì)應(yīng)組件，通過(guò)v-if判斷即可，需要解決的是越權(quán)頁(yè)面的攔截問(wèn)題。在上面常見(jiàn)的做法中，為了實(shí)現(xiàn)攔截，單獨(dú)寫(xiě)了一個(gè)登錄頁(yè)面，登錄之后再根據(jù)權(quán)限加載路由，這樣，沒(méi)有權(quán)限的路由根本不會(huì)加載，于是被導(dǎo)向404頁(yè)面。

那么，現(xiàn)在的問(wèn)題是，怎么樣會(huì)有更簡(jiǎn)單的方式？

顯然，如果我們不想單獨(dú)寫(xiě)login頁(yè)面，那么router在登錄前就完成加載了。如果無(wú)法通過(guò)router自動(dòng)將越權(quán)頁(yè)面導(dǎo)向404頁(yè)面，我們能做的，只能手動(dòng)引導(dǎo)了。思路清楚了，實(shí)現(xiàn)起來(lái)就毫無(wú)壓力：

根據(jù)vue組件的生命周期，我們可以在mounted鉤子上進(jìn)行權(quán)限判斷，如果通過(guò)props傳入的用戶(hù)權(quán)限列表沒(méi)有對(duì)應(yīng)權(quán)限，就跳轉(zhuǎn)頁(yè)面到404：

mounted () {
     if (!this.check_user_privilege (current_page)) {
       this.$Message.error('權(quán)限不足');
       this.$router.push('404');
     }
 }

當(dāng)然，事實(shí)上vue-router也提供了頁(yè)面跳轉(zhuǎn)時(shí)的鉤子方法，全局的有beforeEach、afterEach等，我們希望直接在組件內(nèi)使用，則可以使用beforeRouteEnter方法，在進(jìn)入頁(yè)面時(shí)進(jìn)行判斷，比如：

beforeRouteEnter (to, from, next) {
     next(vm => {
       if (!vm.check_user_privilege (current_page)) {
         vm.$Message.error('權(quán)限不足');
         vm.$router.push('404');
       }
     })
   },

具體可以參考[文檔]。

當(dāng)然，就這個(gè)例子來(lái)說(shuō)，用vue-router提供的鉤子還不如直接在mounted寫(xiě)判斷條件，因?yàn)閎eforeRouteEnter方法中的next需要調(diào)用組件參數(shù)，是在mounted執(zhí)行之后才執(zhí)行的，而我們又經(jīng)常需要在mounted鉤子加載頁(yè)面數(shù)據(jù)，為了避免浪費(fèi)，先進(jìn)行判斷是比較好的。

和常用方法相比，簡(jiǎn)單方法是有額外開(kāi)銷(xiāo)的，主要在于需要完全加載路由，同時(shí)在加載頁(yè)面后進(jìn)行了一次判斷。不過(guò)從寫(xiě)代碼的角度來(lái)說(shuō)，似乎邏輯上更節(jié)約，因?yàn)椴挥昧硗鈱?xiě)一個(gè)集中進(jìn)行權(quán)限控制的文件了，至于每個(gè)頁(yè)面的權(quán)限判斷，那是本來(lái)在菜單欄就要做的事情，延伸到不同頁(yè)面也不算什么負(fù)擔(dān)。

會(huì)不會(huì)有什么副作用呢？暫時(shí)來(lái)看似乎是沒(méi)有的，如果在mounted最開(kāi)始就進(jìn)行頁(yè)面權(quán)限判斷，也不會(huì)有加載越權(quán)數(shù)據(jù)的問(wèn)題，況且數(shù)據(jù)權(quán)限是后端需要單獨(dú)判斷的，不應(yīng)該讓前端去擔(dān)心。

看完上述內(nèi)容，你們掌握vue-router中怎么實(shí)現(xiàn)權(quán)限控制的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！