BuildAdmin

# 辅助工具/函数

# 前端鉴权（函数式）

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

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

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

// 按钮权限检查：管理员分组管理->添加
auth({ name: '/admin/auth/group', subNodeName: '/admin/auth/group/add' })

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

// 会员中心内菜单鉴权
auth({ name: '/user/account/profile' })

// 前台首页按钮鉴权（注意区分该按钮是否在会员未登录时有效）
auth({ name: '/', subNodeName: '/index' })

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

温馨提示

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

# 加载网络CSS/JS文件

import { loadCss, loadJs } from '/@/utils/common'
loadCss('网络css文件url')
loadJs('网络js文件url')

# 设置页面标题

import { setTitle } from '/@/utils/common'
setTitle('新的页面标题')

# 检查URL是否是外部的

import { isExternal } from '/@/utils/common'
if (isExternal('路径')) {
    console.log('是外部链接')
} else {
    console.log('不是外部链接')
}

# 获取管理员身份令牌

import { useAdminInfo } from '/@/stores/adminInfo'
const adminInfo = useAdminInfo()
console.log(adminInfo.getToken())
console.log(adminInfo.getToken('refresh')) // token 刷新令牌

# 获取会员身份令牌

import { useUserInfo } from '/@/stores/userInfo'
const userInfo = useUserInfo()
console.log(userInfo.getToken())
console.log(userInfo.getToken('refresh')) // token 刷新令牌

# 防抖

debounce函数，在间隔毫秒数内重复触发执行函数，则只执行一次

  • 参数一：执行函数
  • 参数二：间隔毫秒数
<template>
    <el-input v-model="state.search" @input="debounce(onSearchInput, 500)()" />
</template>

<script>
import { reactive } from 'vue'
import { debounce } from '/@/utils/common'

const state = reactive({
    search: '',
})

const onSearchInput = () => {
    console.log('开始搜索:' + state.search)
}
</script>

# 表单重置

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

<script>
import { onResetForm } from '/@/utils/common'
import { ElForm } from 'element-plus'

const formRef = ref<InstanceType<typeof ElForm>>()
</script>

# 是否在后台应用内

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

# 是否为手机设备

import { isMobile } from '/@/utils/common'
if (isMobile()) {
    console.log('用户使用手机访问')
}

# 随机数生成

import { randomNum, uuid, shortUuid } from '/@/utils/random'
console.log(randomNum(4,6)) // 生成4到6位的随机数
console.log(shortUuid('前缀')) // 生成唯一标识
console.log(uuid()) // 生成全球唯一标识

# 切换路由

通过此函数切换路由时，切换失败，会有错误提示，参数同router.push

import { routePush } from '/@/utils/router'
routePush({ name: 'routine/adminInfo', params: { a: 1 } })
routePush('/admin/dashboard')

routePush('/test/posva#hash')
routePush({ path: '/test/posva', hash: '#hash' })
routePush({ name: 'test', params: { a: '1' }, hash: '#hash' })
// 只改变 hash
routePush({ hash: '#hash' })
// 只改变 query
routePush({ query: { page: '2' } })
// 只改变 param
routePush({ params: { a: '1' } })

# 本地缓存与会话缓存

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 useCurrentInstance from '/@/utils/useCurrentInstance'
const { proxy } = useCurrentInstance()

proxy.eventBus.off('xxx')

← CSS/SCSS样式 →