需求描述

最近接到一個新的需求，要求將系統的用戶進行分類，用戶登陸后根據不同的用戶權限展示不同的功能列表。

這個功能在后臺管理中很常見，大致的思路是

后臺返回用戶類型，前端根據用戶類型生成該類用戶可以訪問的功能列表。

后臺返回功能列表，前端進行循環渲染。

一個在前端生成功能列表，一個在后端返回，兩個本質上類似，最終都是需要得到一個該用戶的功能列表。但是兩者都有一個不可忽視的東西，就是如果用戶直接在地址欄輸入會怎么樣。

技術選型

由于公司項目不算小，為了后期維護方便，我還是選擇了使用 vuex 完成上述的功能。

主要想法為在vuex中保存用戶登陸后的狀態，以及用戶可訪問的路由列表，這樣的話，不涉及到父子組件間的數據傳遞，可以很方便的在單個組件中獲取到用戶的權限路由列表。

Vuex

如果只是想簡單的使用一個vuex,了解state,mutation,action就足夠你使用

在src文件夾下，創建一個store文件夾，如果項目簡單，可以將state,mutations,actions,getters等寫入到一個文件中

主要代碼很簡單，只需要導入Vue,Vuex，并且調用Vue.use(Vuex)。

結合官方解釋的個人理解，一個vuex文件就是一個倉庫，它包含著你需要共享的變量、有關的事件、以及可以執行這些事件的行為，我們把這些導出去，在單個組件中引入，我們便可以在單個組件中對共享的變量進行改變。

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const state = {

userLogin:false//共享變量

}

export default new Vuex.Store({

state

})

state

state主要功能是用來定義變量,代表你需要共享的一個狀態。比如，我想要在每個組件中 共享用戶的路由列表，所以，我需要先在state中定義一個存放路由列表的變量。

一、vuex文件代碼

store/index.js中

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const state = {

pressionList: [{ path: "/A", name: "頁面A" }],//用戶允許登陸的路由列表,為了方便記錄，我寫了一個默認值，這個可以不用

userLogin:false//用戶登陸狀態

}

export default new Vuex.Store({

state

})

二、main.js文件代碼

main.js中直接引入 store文件，并進行全局注冊即可。這樣在每個組件中你都可以調用state里的共享變量啦。

import Vuex from 'vuex'

import store from './store/index/'

Vue.user(Vuex)

new Vue({

el: '#app',

router,

store,

components: { App },

template: ''

})

那怎么樣在組件中讀出state的變量呢？有兩種方法：直接獲取、或者使用mapState輔助工具。

插播一條題外話

我們做為一枚程序猿，必須要試著去讀API，一次讀不懂就多讀幾次。再讀不懂請教別人，再去讀一次，你會發現每次讀都有不同的收獲。

以下為vuex官方API，我會試著帶一點API里的東西討論這次需求的生成。

https://vuex.vuejs.org/zh/guide/

三、單個組件中讀取state

以下為官方API提供對state用法的描述。

上半段，將狀態從根組件“注入”到每一個子組件，我們已經在main.js里完成了。

主要看下半段，在computed屬性里，監聽state中的變量，然后通過this.$store.state獲取

套入到我們的需求中，我們需要獲取用戶的路由列表，以及登陸狀態

3.1 直接獲取

computed: {

pressionList(){

return this.$store.state.pressionList

},

userLogin(state){

return state.userLogin//或者接收一個state類型的變量，直接調用state里的共享屬性

}

}

此時我們已經獲取到了state里的狀態，此時它就像一個data里定義的變量，我們可以使用數據雙向綁定的形式調用它。如：我想要輸出用戶登陸的狀態。或者在事件中展示這個狀態。

{{userLogin}}

methods:{

login(){

console.log(this.userLogin)

}

}

3.2 借助mapState輔助工具獲取

假如說state里保存了很多個共享的狀態，我們都需要怎么辦呢，這樣一個一個寫太復雜，這時候，mapState就幫了我們很大的忙。

還是先看官方上的文章解釋

我們需要在組件的內部導入mapState,然后在computed屬性里監聽，以上圖片無非就是說了幾種情況

如果你只是想單純的使用state里的變量，那你用箭頭函數的形式，會更加簡單

countAlias:'count'//相當于給state里的count變量起了一個別名叫countAlias，調用時使用countAlias

如果你需要在共享變量里添加一個其它的變量作為返回結果時，這時不能夠使用箭頭函數，而是常規的函數才能操作。因為箭頭函數本身是沒有this這個東西噠。

如果state中有很多的變量，而且，你也不打算給它們起別名，或者做其它的操作，你可以使用數組的形式。向state傳遞一個字符串的數組，state會自己一一的對應。

mapState(['pressionList','userLogin'])

是數組，所以中間是 [],不是{}

mutation

有了以上的基礎，我們可以獲取到一個共享的狀態了，但是如果我們需要在共享的狀態上做點小動作怎么辦呢？

mutation就幫我們做這些事件，我們需要把對共享狀態需要做的事件寫到mutation中，然后在組件中調用mutation里的事件，就可以了。

同樣的，可以去官網看一下關于mutation的介紹。這里就不放圖了，直接上代碼

一、定義mutation

store/index.js

const mutations = {

changePressionList(state,list){

state.pressionList = list;

}

}

export default new Vuex.Store({

state,

mutations//同樣就

})

mutation里的事件第一個參數肯定是state，用來調用共享的所有變量，后面可以接收一個其它的參數。

這里我是需要改變 共享路由的值，所以我需要接收到一個新的值來替換掉舊的值

個人理解時間

mutation是用來定義一個事件的，我們需要對共享變量做的一系列的動作。但是，這個事件自己是不會去執行的，像methods里定義的一個事件一樣，你需要去觸發它。而mutation觸發的方法就是用commit。如你想單擊的時候觸發mutation事件，你需要在單擊事件里使用commit調用 mutation事件。

二、調用mutation

同樣兩種方式，直接調用、借助mapMutations輔助函數

2.1 直接調用

如果你理解了獲取state變量，這個mutation調用會簡單很多。

既然mutation是一個事件，所以，我們需要在methods里去寫

更改用戶路由

methods:{

changePress(){

let B= [{ path: "/B", name: "頁面B" }];

this.$store.commit('changePressionList',B)

}

}

因為我的mutation定義的事件里接收了一個參數，那我調用的時候就需要傳遞一個參數。

commit 第一個參數是你需要調用的mutation事件，第二個是mutation事件里需要的一些參數。

點擊頁面上的改變按鈕，你會發現輸出的pressionList變量會發生改變。

我這個只是簡單的用法，還有更深層次的，想學習的可以去官網查看

2.2 借助mapMutations輔助函數

也是三種情況,你可以以字符串數組的形式調用mutation里定義的事件，也可以給事件起一個別名。這個也跟state類似

事件不需要起別名，事件名與mutation名一致，并且沒有接收變量這種情況下，可以使用

...mapMutations(['changePressionList'])

注意，這里是[],以字符串數組的形式調用

在需要傳值的情況下，也可以使用字符串數組的形式傳遞。但是調用時，需要傳遞相應的參數。

改變

data(){

return {

list:[{ path: "/B", name: "頁面B" }]

}

}

methods:...mapMutations([

'pressionList'

])

add:'increment' 相當于給mutation中定義的increment事件起了一個add別名，在組件中調用時，直接調用 add即可。

action

有了state、mutation的基礎，我們就可以實現我們的第一個功能。在用戶登陸成功后，修改userLogin的狀態，然后將用戶的路由列表寫入。

一、定義action

action與mutation類似，但是他是用來提交mutation的。相當于我們在action里提交mutation，然后我們再調用action。

action接收到的第一個參數，是一個與store對象有相同的方法和屬性的context對象，包括commit,state,getters方法等等。

利用解構賦值，我們也可以只用context其中的一個方法，如commit，所以我們會經常的看到({commit,state})樣式的代碼

如果需要傳遞參數，可以在后面添加

const actions = {

changePress({commit},list){

commit('changePressionList',list)

}

}

二、調用action

與muation不同的是，調用action中的事件使用的是dispatch,意思是分發mutation中的事件。

調用方法也是在methods中，分為兩種，與mutation用法一致。不再贅述

路由限制

我們根據以上的做法，我們得到了一個有效的路由列表。我們可以在首頁里循環這個列表，有哪個路由我們就渲染哪個路由

底部路由代碼

即使如此，如果有人直接在地址欄里輸入了他不能訪問的路由，我們該怎么辦呢？

這里就需要兩個知識

動態添加路由

改變路由文件

動態添加路由欠著吧~~

改變路由文件很簡單，只需要在路由文件末尾添加一個匹配所有路由的

path為/*表示，當用戶在地址欄直接 輸入一個錯誤的地址時，如路由文件中并沒有abcd這個頁面，但是用戶在地址欄輸入了/abcd，這時會自動跳到登陸頁面。

export default new Router({

routes: [{

path: '/',

name: 'Login',

component: Login

},

{

path: '/Father',

name: 'Father',

component: Father

},

{

path: '/Child',

name: 'Child',

component: Child

},

{

path: '/Home',

name: 'Home',

component: Home

},

{

path: '/A',

name: 'A',

component: A

},

{

path: '/*',

name: 'Login',

component: Login

}

],

mode: 'history'

}, )

個人公眾號

對我感興趣的盆友，也可以關注我的個人公眾號---小嘀咕影院官網。會不定期更新技術知識，旅行游記以及影視推薦

總結

以上是生活随笔為你收集整理的vue根据不同权限显示图片_vuex根据不同的用户权限展示不同的路由列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。