需求描述

站在用戶的角度思考問題，與客戶深入溝通，找到岫巖網(wǎng)站設計與岫巖網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站建設、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、網(wǎng)絡空間、企業(yè)郵箱。業(yè)務覆蓋岫巖地區(qū)。

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

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

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

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

技術選型

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

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

Vuex

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

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

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

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

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

名稱欄目：vuex根據(jù)不同的用戶權限展示不同的路由列表功能-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://weahome.cn/article/gpppo.html