快捷導(dǎo)航

vuex根據(jù)不同的用戶(hù)權(quán)限展示不同的路由列表功能

更新時(shí)間：2019年09月20日 14:45:55 作者：麥籬落

最近接到一個(gè)新的需求，要求將系統(tǒng)的用戶(hù)進(jìn)行分類(lèi)，用戶(hù)登陸后根據(jù)不同的用戶(hù)權(quán)限展示不同的功能列表。這篇文章主要介紹了vuex根據(jù)不同的用戶(hù)權(quán)限展示不同的路由列表,需要的朋友可以參考下

需求描述

最近接到一個(gè)新的需求，要求將系統(tǒng)的用戶(hù)進(jìn)行分類(lèi)，用戶(hù)登陸后根據(jù)不同的用戶(hù)權(quán)限展示不同的功能列表。

這個(gè)功能在后臺(tái)管理中很常見(jiàn)，大致的思路是

后臺(tái)返回用戶(hù)類(lèi)型，前端根據(jù)用戶(hù)類(lèi)型生成該類(lèi)用戶(hù)可以訪問(wèn)的功能列表。
后臺(tái)返回功能列表，前端進(jìn)行循環(huán)渲染。

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

技術(shù)選型

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

主要想法為在vuex中保存用戶(hù)登陸后的狀態(tài)，以及用戶(hù)可訪問(wèn)的路由列表，這樣的話，不涉及到父子組件間的數(shù)據(jù)傳遞，可以很方便的在單個(gè)組件中獲取到用戶(hù)的權(quán)限路由列表。

Vuex

如果只是想簡(jiǎn)單的使用一個(gè)vuex,了解state,mutation,action就足夠你使用

在src文件夾下，創(chuàng)建一個(gè)store文件夾，如果項(xiàng)目簡(jiǎn)單，可以將state,mutations,actions,getters等寫(xiě)入到一個(gè)文件中

主要代碼很簡(jiǎn)單，只需要導(dǎo)入Vue,Vuex，并且調(diào)用Vue.use(Vuex)。

結(jié)合官方解釋的個(gè)人理解，一個(gè)vuex文件就是一個(gè)倉(cāng)庫(kù)，它包含著你需要共享的變量、有關(guān)的事件、以及可以執(zhí)行這些事件的行為，我們把這些導(dǎo)出去，在單個(gè)組件中引入，我們便可以在單個(gè)組件中對(duì)共享的變量進(jìn)行改變。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state
})

state

state主要功能是用來(lái)定義變量,代表你需要共享的一個(gè)狀態(tài)。比如，我想要共享用戶(hù)可以訪問(wèn)的路由列表，所以，我需要先在state中定義一個(gè)存放路由列表的變量。

store/index.js中

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {  
  pressionList: [],//用戶(hù)允許登陸的路由列表
  loginTag:false//用戶(hù)登陸狀態(tài) 
}
export default new Vuex.Store({
state
})

單個(gè)組件中使用state，有兩種方法，直接獲取，或者使用mapState輔助工具

總結(jié)

以上所述是小編給大家介紹的vuex根據(jù)不同的用戶(hù)權(quán)限展示不同的路由列表功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: