辅助工具/函数

前端鉴权

关于鉴权，请先了解 路由与权限；auth 函数可以传递一个 string，此时会以当前页面的 path 从服务端获取到的权限节点进行比对，来确定用户是否拥有某个按钮的权限：

// 若打开路由：`/#/admin/auth/group`，此时使用 auth 进行鉴权：
import { auth } from '@/utils/common'
if (auth('create')) {
    console.log('拥有 /auth/group/create 权限')
} else {
    console.log('不拥有 /auth/group/create 权限')
}

以上只能保证菜单规则的 name 和 path 相同时进行鉴权，且只能根据 path 有局限性，所以 auth 函数还可以传递一个对象：

// 按钮权限检查：管理员分组管理 > 创建
if (auth({ name: '/admin/auth/group', subNodeName: '/admin/auth/group/create' })) {
    console.log('拥有 /auth/group/create 权限')
} else {
    console.log('不拥有 /auth/group/create 权限')
}

// 菜单权限检查：管理员分组管理，此时只要拥有该菜单下的任意一个权限节点（页面按钮）即可通过鉴权
auth({ name: '/admin/auth/group' })

// 不支持通过 name 直接检查一个按钮，请先检查该按钮的上级菜单，然后通过 subNodeName 检查按钮
auth({ name: '/admin/auth/group/delete' }) // 错误的

// subNodeName 不支持简写，需传递完整名称
auth({ name: '/admin/auth/group', subNodeName: 'create' }) // 错误的

温馨提示

传递对象鉴权时，不再与当前路由的 path 相关，比如：您可以在 /admin/auth/group 页面，验证是否拥有 /admin/routine/config 的权限

获取静态资源的完整 URL

import { arrayFullURL, fullURL } from '@/utils/common'

fullURL('/static/images/avatar.png') // http://localhost:8080/static/images/avatar.png

arrayFullURL(['/static/images/avatar.png']) // ['http://localhost:8080/static/images/avatar.png']

TIP

1. 此函数依赖于 @/stores/config.ts 状态商店的 config.site.cdnUrl（后台环境下的初始化请求会自动填充该值）。
2. 服务端也有相同作用的 urlx.FullURL 公共方法：URL扩展。

复制数据

import { copy } from '@/utils/common'
import { ElMessage } from 'element-plus'

copy('内容').then((success) => {
    if (success) ElMessage.success('复制非常成功')
})

从对象数组中搜索索引对应值

import { getArrayKey } from '@/utils/common'

const files = [
    {
        uid: '1',
        name: '名称 - 1',
    },
    {
        uid: '2',
        name: '名称 - 2',
    },
]

const fileIndex = getArrayKey(files, 'uid', '2') // 返回索引，此处值为: 1

获取管理员身份令牌

import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
console.log(adminInfo.token)

表单重置

<template>
    <el-form ref="formRef">
        <el-button @click="resetForm(formRef)">重置</el-button>
    </el-form>
</template>

<script>
import { resetForm } from '@/utils/common'

const formRef = useTemplateRef('formRef')
</script>

是否在后台应用内

import { isAdminApp } from '@/utils/common'
if (isAdminApp()) {
    console.log('在后台')
} else {
    console.log('不在后台')
}

随机数生成

import { uuid } from '@/utils/random'
console.log(uuid()) // 生成 v4 UUID

本地缓存与会话缓存

import { Local, Session } from '@/utils/storage'

Local.set('key', 'value') // 设置本地缓存
Local.get('key') // 获取本地缓存值
Local.remove('key') // 删除某个本地缓存
Local.clear() // 清理所有本地缓存

Session.set('key', 'value') // 设置会话缓存
Session.get('key') // 获取会话缓存值
Session.remove('key') // 删除某个会话缓存
Session.clear() // 清理所有会话缓存

快速获取当前应用实例

import { useGlobalProperties } from '@/hooks/useGlobalProperties'

// setup 内使用
const globalProperties = useGlobalProperties()!

globalProperties.eventBus.emit('onTabViewClose', route)