需求描述

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

最近接到一個(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
})

新聞名稱(chēng)：vuex根據(jù)不同的用戶(hù)權(quán)限展示不同的路由列表功能-創(chuàng)新互聯(lián)
分享鏈接：http://jinyejixie.com/article30/gpppo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、外貿(mào)網(wǎng)站建設(shè)、ChatGPT、虛擬主機(jī)、品牌網(wǎng)站制作、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)