溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求描述
最近接到一個新的需求，要求將系統的用戶進行分類，用戶登陸后根據不同的用戶權限展示不同的功能列表。
這個功能在后臺管理中很常見，大致的思路是
后臺返回用戶類型，前端根據用戶類型生成該類用戶可以訪問的功能列表。
后臺返回功能列表，前端進行循環渲染。
一個在前端生成功能列表，一個在后端返回，兩個本質上類似，最終都是需要得到一個該用戶的功能功能列表。但是兩者都有一個不可忽視的東西，就是如果用戶直接在地址欄輸入會怎么樣。
技術選型
由于公司項目不算小，為了后期維護方便，我還是選擇了使用 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);
export default new Vuex.Store({
state
})
state
state主要功能是用來定義變量,代表你需要共享的一個狀態。比如，我想要共享用戶可以訪問的路由列表，所以，我需要先在state中定義一個存放路由列表的變量。
store/index.js中
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
pressionList: [],//用戶允許登陸的路由列表
loginTag:false//用戶登陸狀態
}
export default new Vuex.Store({
state
})
單個組件中使用state，有兩種方法，直接獲取，或者使用mapState輔助工具
總結
以上所述是小編給大家介紹的vuex根據不同的用戶權限展示不同的路由列表功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
