【前端】字典获取过程

过程

登录成功后，去路由守卫那获取用户名，如果有则放行，没则请求用户信息以及权限菜单和字典表等信息，存入浏览器缓存中，在需要的下拉框或者表格中使用，每次后端新增字典，前端需要在utils中的字典工具类中DICT_TYPE里加上对应的常量

代码

仅供参考
先路由守卫配置

//路由鉴权:鉴权,项目当中路由能不能被的权限的设置(某一个路由什么条件下可以访问、什么条件下不可以访问)
import router from '@/router'
import setting from './setting'
import useDictStore from '@/store/modules/dict'
//@ts-ignore
import nprogress from 'nprogress'
//引入进度条样式
import 'nprogress/nprogress.css'
nprogress.configure({ showSpinner: false })
//获取用户相关的小仓库内部token数据,去判断用户是否登录成功
import useUserStore from './store/modules/user'
import pinia from './store'
const userStore = useUserStore(pinia)
//全局守卫:项目当中任意路由切换都会触发的钩子
//全局前置守卫
router.beforeEach(async (to: any, from: any, next: any) => {document.title = `${setting.title} - ${to.meta.title}`//to:你将要访问那个路由//from:你从来个路由而来//next:路由的放行函数nprogress.start()//获取token,去判断用户登录、还是未登录const token = userStore.tokenconsole.log('🚀 ~ router.beforeEach ~ token:', token)//获取用户名字const username = userStore.username//用户登录判断if (token) {//登录成功,访问login,不能访问,指向首页if (to.path == '/login') {next({ path: '/' })} else {//登录成功访问其余六个路由(登录排除)//有用户信息if (username) {//放行next()} else {//如果没有用户信息,在守卫这里发请求获取到了用户信息再放行try {//获取用户信息await userStore.userInfo()// 获取所有字典const dictStore = useDictStore()if (!dictStore.getIsSetDict) {await dictStore.setDictMap()}//放行//万一:刷新的时候是异步路由,有可能获取到用户信息、异步路由还没有加载完毕,出现空白的效果next({ ...to })} catch (error) {//token过期:获取不到用户信息了//用户手动修改本地存储token//退出登录->用户相关的数据清空await userStore.userLogout()next({ path: '/login', query: { redirect: to.path } })}}}} else {//用户未登录判断if (to.path == '/login') {next()} else {next({ path: '/login', query: { redirect: to.path } })}}
})
//全局后置守卫
router.afterEach((to: any, from: any) => {nprogress.done()
})//第一个问题:任意路由切换实现进度条业务 ---nprogress
//第二个问题:路由鉴权(路由组件访问权限的设置)
//全部路由组件:登录|404|任意路由|首页|数据大屏|权限管理(三个子路由)|商品管理(四个子路由)//用户未登录:可以访问login,其余六个路由不能访问(指向login)
//用户登录成功:不可以访问login[指向首页],其余的路由可以访问

字典的小仓库

import { defineStore } from 'pinia'import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache('sessionStorage')
import { listSimpleDictDatas } from '@/api/dict/data'const useDictStore = defineStore('dict', {state: () => ({dictMap: new Map(),isSetDict: false,}),getters: {getDictMap() {const dictMap = wsCache.get(CACHE_KEY.DICT_CACHE)console.log('🚀 ~ getDictMap ~ dictMap:', dictMap)if (dictMap) {this.dictMap = dictMap}return this.dictMap},getIsSetDict() {return this.isSetDict},},actions: {async setDictMap() {const dictMap = wsCache.get(CACHE_KEY.DICT_CACHE)if (dictMap) {this.dictMap = dictMapthis.isSetDict = true} else {const res = await listSimpleDictDatas()console.log('🚀 ~ setDictMap ~ res:字典回显', res)// 设置数据const dictDataMap = new Map()res.data.forEach((dictData) => {// 获得 dictType 层级const enumValueObj = dictDataMap[dictData.dictType]if (!enumValueObj) {dictDataMap[dictData.dictType] = []}// 处理 dictValue 层级dictDataMap[dictData.dictType].push({value: dictData.value,label: dictData.label,colorType: dictData.colorType,cssClass: dictData.cssClass,})})this.dictMap = dictDataMapthis.isSetDict = truewsCache.set(CACHE_KEY.DICT_CACHE, dictDataMap, { exp: 60 }) // 60 秒 过期}},getDictByType(type) {console.log(' getDictByType(type)')if (!this.isSetDict) {this.setDictMap()}return this.dictMap[type]},async resetDict() {wsCache.delete(CACHE_KEY.DICT_CACHE)const res = await listSimpleDictDatas()// 设置数据const dictDataMap = new Map()res.forEach((dictData) => {// 获得 dictType 层级const enumValueObj = dictDataMap[dictData.dictType]if (!enumValueObj) {dictDataMap[dictData.dictType] = []}// 处理 dictValue 层级dictDataMap[dictData.dictType].push({value: dictData.value,label: dictData.label,colorType: dictData.colorType,cssClass: dictData.cssClass,})})this.dictMap = dictDataMapthis.isSetDict = truewsCache.set(CACHE_KEY.DICT_CACHE, dictDataMap, { exp: 60 }) // 60 秒 过期},},
})export default useDictStore

utils里的字典工具类

/*** 数据字典工具类*/
import useDictStore from '@/store/modules/dict'const dictStore = useDictStore()export const getDictOptions = (dictType) => {return dictStore.getDictByType(dictType) || []
}export const getIntDictOptions = (dictType) => {// 获得通用的 DictDataType 列表const dictOptions = getDictOptions(dictType)// 转换成 number 类型的 NumberDictDataType 类型// why 需要特殊转换：避免 IDEA 在 v-for="dict in getIntDictOptions(...)" 时，el-option 的 key 会告警const dictOption = []dictOptions.forEach((dict) => {dictOption.push({...dict,value: parseInt(dict.value + ''),})})return dictOption
}export const getStrDictOptions = (dictType) => {const dictOption = []const dictOptions = getDictOptions(dictType)dictOptions.forEach((dict) => {dictOption.push({...dict,value: dict.value + '',})})return dictOption
}export const getBoolDictOptions = (dictType) => {const dictOption = []const dictOptions = getDictOptions(dictType)dictOptions.forEach((dict) => {dictOption.push({...dict,value: dict.value + '' === 'true',})})return dictOption
}/*** 获取指定字典类型的指定值对应的字典对象* @param dictType 字典类型* @param value 字典值* @return DictDataType 字典对象*/
export const getDictObj = (dictType, value) => {const dictOptions = getDictOptions(dictType)for (const dict of dictOptions) {if (dict.value === value + '') {return dict}}
}/*** 获得字典数据的文本展示** @param dictType 字典类型* @param value 字典数据的值* @return 字典名称*/
export const getDictLabel = (dictType, value) => {const dictOptions = getDictOptions(dictType)const dictLabel = ref('')dictOptions.forEach((dict) => {if (dict.value === value + '') {dictLabel.value = dict.label}})return dictLabel.value
}export function getDictData(dictType, value) {// 获取 dictType 对应的数据字典数组const dictDatas = getDictDatas(dictType)console.log('🚀 ~ getDictData ~ dictDatas:', dictDatas)if (!dictDatas || dictDatas.length === 0) {return ''}// 获取 value 对应的展示名value = value + '' // 强制转换成字符串，因为 DictData 小类数值，是字符串for (const dictData of dictDatas) {if (dictData.value === value) {return dictData}}return undefined
}export function getDictDataLabel(dictType, value) {const dict = getDictData(dictType, value)return dict ? dict.label : ''
}/*** 获取 dictType 对应的数据字典数组** @param dictType 数据类型* @returns {*|Array} 数据字典数组*/
export function getDictDatas(dictType) {console.log('xxxxx', dictStore.getDictMap[dictType])return dictStore.getDictMap[dictType] || []
}/*** 获取 dictType 对应的数据字典数组** @param dictType 数据类型* @param values 数组、单个元素* @returns {*|Array} 数据字典数组*/
export function getDictDatas2(dictType, values) {if (values === undefined) {return []}// 如果是单个元素，则转换成数组if (!Array.isArray(values)) {values = [this.value]}// 获得字典数据const results = []for (const value of values) {const dict = getDictData(dictType, value)if (dict) {results.push(dict)}}return results
}export const DICT_TYPE = {// ========== SYSTEM 模块 ==========SYSTEM_USER_SEX: 'system_user_sex',SYSTEM_MENU_TYPE: 'system_menu_type',SYSTEM_ROLE_TYPE: 'system_role_type',SYSTEM_DATA_SCOPE: 'system_data_scope',SYSTEM_NOTICE_TYPE: 'system_notice_type',SYSTEM_OPERATE_TYPE: 'system_operate_type',SYSTEM_LOGIN_TYPE: 'system_login_type',SYSTEM_LOGIN_RESULT: 'system_login_result',SYSTEM_SMS_CHANNEL_CODE: 'system_sms_channel_code',SYSTEM_SMS_TEMPLATE_TYPE: 'system_sms_template_type',SYSTEM_SMS_SEND_STATUS: 'system_sms_send_status',SYSTEM_SMS_RECEIVE_STATUS: 'system_sms_receive_status',SYSTEM_ERROR_CODE_TYPE: 'system_error_code_type',SYSTEM_OAUTH2_GRANT_TYPE: 'system_oauth2_grant_type',SYSTEM_MAIL_SEND_STATUS: 'system_mail_send_status',SYSTEM_NOTIFY_TEMPLATE_TYPE: 'system_notify_template_type',// ========== 通用 模块 ==========COMMON_STATUS: 'common_status',
}

搜索框使用

          <el-form-item :label="$t('systemManager.userManager.status')" prop="status"><el-select v-model="searchData.status" placeholder="请选择租户状态" clearable style="width: 240px"><el-option v-for="dict in getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label" :value="dict.value" /></el-select></el-form-item>import { getDictDatas } from '@/utils/dict'
import { DICT_TYPE } from '@/utils/dict'

表格中使用

          <el-table-column prop="enabled" align="center" width="80" :label="$t('page.status')"><template #default="scope"><dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /></template></el-table-column>

组件

<template><span><template v-for="(dict, index) in getDictDatas2(props.type, props.value)"><!-- 默认样式 --><spanv-if="dict.colorType === 'default' || dict.colorType === '' || dict.colorType === undefined":key="dict.value":index="index":type="dict.colorType":class="dict.cssClass">{{ dict.label }}</span><!-- Tag 样式 --><el-tag v-else :disable-transitions="true" :key="dict.dictType" :index="index" :type="dict.colorType" :class="dict.cssClass">{{ dict.label }}</el-tag></template></span>
</template><script setup>
import { getDictDatas2 } from '@/utils/dict'const props = defineProps({type: String,value: [Number, String, Boolean, Array],
})// onMounted(() => {
//   console.log('自定义属性', props.type, props.value)
// })
</script>
<style scoped>
.el-tag + .el-tag {margin-left: 10px;
}
.testAA {color: darkmagenta;
}
</style>

数据

// 表格数据
function createdDict() {return [{ dictType: 'common_status', value: '1', label: '启用', colorType: 'primary', cssClass: '' },{ dictType: 'common_status', value: '0', label: '停用', colorType: 'warning', cssClass: '' },{ dictType: 'system_operate_type', value: '0', label: '其它', colorType: 'info', cssClass: '' },{ dictType: 'system_operate_type', value: '1', label: '查询', colorType: 'info', cssClass: '' },{ dictType: 'system_operate_type', value: '2', label: '新增', colorType: 'primary', cssClass: '' },{ dictType: 'system_operate_type', value: '3', label: '修改', colorType: 'warning', cssClass: '' },{ dictType: 'system_operate_type', value: '4', label: '删除', colorType: 'danger', cssClass: '' },{ dictType: 'system_operate_type', value: '5', label: '导出', colorType: 'success', cssClass: '' },{ dictType: 'system_operate_type', value: '6', label: '导入', colorType: 'success', cssClass: '' },]
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/755323.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python中的async和await用法

python中的async和await用法

文章目录 任务处理方式异步操作的优缺点async和awiatasyncawait使用 async/await 的注意事项示例 前言&#xff1a;此篇文章是在文心一言的辅助下完成的。 任务处理方式 同步操作&#xff1a;同步操作是指所有的操作都完成后&#xff0c;才返回给用户结果。当一个任务发出请求…
阅读更多...
每日汇评：黄金等待金叉确认和央行裁决

每日汇评：黄金等待金叉确认和央行裁决

金价周二早盘徘徊在每盎司2160美元附近&#xff0c;等待主要央行的决定&#xff1b; 尽管美债收益率疲软&#xff0c;但在日本央行和澳央行做出谨慎裁决之前&#xff0c;美元依然坚挺&#xff1b; 随着RSI指数再次转为看涨&#xff0c;黄金价格在日线图上试探金叉形态&#xff…
阅读更多...
如何快速下载并剪辑B站视频

如何快速下载并剪辑B站视频

1、B站手机端右上角缓存视频&#xff1b; 2、在手机文件管理助手中找到android/data/80找到两个文件&#xff0c;video.m4s和audio.m4s&#xff0c;将它们发送到电脑&#xff0c;系统会默认保存在你的个人文件夹里&#xff0c;C:\users\用户名 3、下载ffmepg https://blog.cs…
阅读更多...
算法沉淀——贪心算法二（leetcode真题剖析）

算法沉淀——贪心算法二（leetcode真题剖析）

算法沉淀——贪心算法二 01.最长递增子序列02.递增的三元子序列03.最长连续递增序列04.买卖股票的最佳时机 01.最长递增子序列 题目链接&#xff1a;https://leetcode.cn/problems/longest-increasing-subsequence/ 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子…
阅读更多...
蓝桥杯（3.16 刷真题）

蓝桥杯（3.16 刷真题）

P8647 [蓝桥杯 2017 省 AB] 分巧克力 AC import java.util.Scanner;public class Main {static int n,k;static final int N 100010;static int[] a new int[N];static int[] b new int[N];public static boolean check(int x) {int ans 0;for(int i1;i<n;i)ans(a[i]/x…
阅读更多...
空间解析几何之直线与平面：推导直线与直线、直线与平面交点

空间解析几何之直线与平面：推导直线与直线、直线与平面交点

空间解析几何——直线与平面 三维空间中的直线和平面与二维空间中的性质有一定的类似之处&#xff0c;但是其相交关系的求解方式有所差异。本文回顾了三维空间中直线和平面的解析表达&#xff0c;然后推导线-线、线-面交点。 平面 空间平面的表达式为&#xff1a; A x B y…
阅读更多...
NCV33172DR2G运算放大器芯片中文资料规格书PDF数据手册引脚图产品概述功能

NCV33172DR2G运算放大器芯片中文资料规格书PDF数据手册引脚图产品概述功能

产品概述&#xff1a; MC33071/72/74 系列单片运算放大器采用了带有创新设计概念的优质双极制造。此类器件根据放大器在 180 A 下运行&#xff0c;提供 1.8 MHz 增益带宽积和 2.1 V/s 摆率&#xff0c;而不采用 JFET 器件技术。尽管此系列可基于分割电源运行&#xff0c;但它尤…
阅读更多...
mysql update set时使用and连接使更新的数据出现问题

mysql update set时使用and连接使更新的数据出现问题

mysql update set时使用and连接使更新的数据出现问题 简单来讲&#xff0c;我在开发时因为错误的使用and进行set连接而不是用,连接&#xff0c;使数据更新的不对&#xff0c;原本的decimal的数据值0.5被我更新后变成了null而不是0.3 原理在这篇博客里有进行说明&#xff08;我没…
阅读更多...
Linux服务器部署若依（ruoyi-vue），从购买服务器到部署完成保姆级教程

Linux服务器部署若依（ruoyi-vue），从购买服务器到部署完成保姆级教程

零、购买服务器 Huawei Cloud EulerOS 还是 centos7&#xff0c;纠结了一段时间&#xff0c;了解到EulerOS是对centos8的延续版本&#xff0c;相当于官方不对centos8继续维护了&#xff0c; 最后还是选 CentOS 7.9 64bit&#xff0c;网上可查找的工具更多且官方还在持续维护。…
阅读更多...
ES: spring boot中使用ElasticsearchClient

ES: spring boot中使用ElasticsearchClient

一、依赖&#xff1a;&#xff08;要根据不同版本的ES来调整依赖,否则会报错&#xff0c;不支持太低版本的ES&#xff0c;比如7.6以下的&#xff09; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-e…
阅读更多...
PHP反序列化--_wakeup()绕过

PHP反序列化--_wakeup()绕过

一、漏洞原理&#xff1a; 二、靶场复现: 进入靶场&#xff0c;分析源代码&#xff1a; <?php error_reporting(0); class secret{var $fileindex.php;public function __construct($file){$this->file$file;}function __destruct(){include_once($this->file);ech…
阅读更多...
算法沉淀——贪心算法三（leetcode真题剖析）

算法沉淀——贪心算法三（leetcode真题剖析）

算法沉淀——贪心算法三 01.买卖股票的最佳时机 II02.K 次取反后最大化的数组和03.按身高排序04.优势洗牌 01.买卖股票的最佳时机 II 题目链接&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-ii/ 给你一个整数数组 prices &#xff0c;其中 pric…
阅读更多...
算法第三十天-矩阵中移动的最大次数

算法第三十天-矩阵中移动的最大次数

矩阵中移动的最大次数 题目要求 解题思路 网格图 DFS 从第一列的任一单元格 ( i , 0 ) (i,0) (i,0) 开始递归。枚举往右上/右/右下三个方向走&#xff0c;如果走一步后&#xff0c;没有出界&#xff0c;且格子值大于 g r i d [ i ] [ j ] grid[i][j] grid[i][j]&#xff0c;则…
阅读更多...
未来十年 人工智能的发展前景是什么？

未来十年 人工智能的发展前景是什么？

所谓AIGC就是用人工智能来进行内容生产，它的特点就是有非常强大的内容生产力，可以大幅提升内容生产的质量和效率，未来也会极大地丰富大家的数字生活。 是不是感觉现在说数字生活还是很虚，但仔细想想一切都是有迹可循——从Stable Diffusion ChatGPT，再到Midjour-ney V5和…
阅读更多...
面向未来的电子元器件批发商城：智能化服务与用户体验革新

面向未来的电子元器件批发商城：智能化服务与用户体验革新

面向未来的电子元器件批发商城必须不断地进行智能化服务与用户体验的革新&#xff0c;以适应快速发展的科技趋势和不断变化的市场需求。以下是一些关键的方向和策略&#xff1a; 智能化供应链管理&#xff1a; 引入先进的人工智能和大数据分析技术&#xff0c;实现供应链的智能…
阅读更多...
Springboot-软件授权License

Springboot-软件授权License

无意中看到了一个简单方便的授权方式&#xff0c;只需几步就可集成到boot项目中。 先上地址&#xff1a;smart-license: 保护个人与企业的软件作品权益&#xff0c;降低盗版造成的损失。PS&#xff1a;因个人精力有限&#xff0c;不再提供该项目的咨询答疑服务。 Smart-licen…
阅读更多...
Java代码审计安全篇-反序列化漏洞

Java代码审计安全篇-反序列化漏洞

前言&#xff1a; 堕落了三个月&#xff0c;现在因为被找实习而困扰&#xff0c;着实自己能力不足&#xff0c;从今天开始 每天沉淀一点点 &#xff0c;准备秋招 加油 注意&#xff1a; 本文章参考qax的网络安全java代码审计和部分师傅审计思路以及webgoat靶场&#xff0c;记录…
阅读更多...
QT5.14.2深入解析Qt QProcess用法之彻底掌控进程操作技巧

QT5.14.2深入解析Qt QProcess用法之彻底掌控进程操作技巧

通过今天的文章&#xff0c;我将带领大家彻底理解和掌握Qt QProcess的使用技巧&#xff0c;这将成为你控制进程的利器。我们的讨论将通过明确的示例&#xff0c;详细的代码案例&#xff0c;结合我在实际软件开发经验中遇到的问题进行说明。 1、Qt QProcess - 什么是进程? 在理…
阅读更多...
计算机基础入门2：GPU

计算机基础入门2：GPU

GPU&#xff08;Graphics Processing Unit&#xff0c;图形处理器&#xff09;又被称作显示核心、视觉处理器、显示芯片&#xff0c;是一种专为并行处理而设计的微型处理器&#xff0c;非常擅长处理大量简单任务&#xff0c;包括图形和视频渲染。 GPU根据接入系统方式分为集成…
阅读更多...
密码学——数字签名

密码学——数字签名

数字签名 引言数字签名签名方案直接数字签名EIGamal 数字签名方案公钥和私钥对的产生签名的产生签名的验证Schnorr 数字签名方案公钥和私钥生成签名生成签名验证证书和认证中心引言 消息认证可以保护双方不受第三方的攻击，但是消息认证不能处理双方自身发生的攻击。如接受方可…
阅读更多...
最新文章

Copyright @ 2022~2023