### Vue 插件注册示例 (Vue Router)

Source: https://doc.likeadmin.cn/php/develop/admin

展示如何通过在 `src/install/plugins` 目录下创建文件来注册 Vue 插件，以 Vue Router 为例，无需在 `main.ts` 中手动引入。

```typescript
// router.ts 
import router from '@/router'
import type { App } from 'vue'
export default (app: App<Element>) => {
    app.use(router)
}
```

--------------------------------

### 单个接口配置示例

Source: https://doc.likeadmin.cn/php/develop/admin

演示如何在单个接口请求中单独配置 Axios 的选项，例如忽略重复请求、开启请求超时重试机制以及是否对返回数据进行处理。

```typescript
// 配置
export function xxxx(data) {
    return request.post({
        url: 'xxx',
        header: {
            'Content-type': ContentTypeEnum.FORM_DATA
        },
        data
    }, {
        // 忽略重复请求
        ignoreCancelToken: true,
        // 开启请求超时重新发起请求请求机制
        isOpenRetry: false,
         // 需要对返回数据进行处理
        isTransformResponse: false,
    })
}
```

--------------------------------

### 请求拦截器配置 (Axios)

Source: https://doc.likeadmin.cn/php/develop/admin

配置 Axios 请求拦截器，包括请求前的 token 添加、POST 请求参数处理，以及响应后的数据转换、消息提示和路由跳转。

```typescript
const axiosHooks: AxiosHooks = {
    requestInterceptorsHook(config) {
        NProgress.start()
        const { withToken, isParamsToData } = config.requestOptions
        const params = config.params || {}
        const headers = config.headers || {}
        // 添加token
        if (withToken) {
            const token = getToken()
            headers.token = token
        }
        // POST请求下如果无data，则将params视为data
        if (
            isParamsToData &&
            !Reflect.has(config, 'data') &&
            config.method?.toUpperCase() === RequestMethodsEnum.POST
        ) {
            config.data = params
            config.params = {}
        }
        config.headers = headers
        return config
    },
    requestInterceptorsCatchHook(err) {
        NProgress.done()
        return err
    },
    async responseInterceptorsHook(response) {
        NProgress.done()
        const { isTransformResponse, isReturnDefaultResponse } = response.config.requestOptions
        //返回默认响应，当需要获取响应头及其他数据时可使用
        if (isReturnDefaultResponse) {
            return response
        }
        // 是否需要对数据进行处理
        if (!isTransformResponse) {
            return response.data
        }
        const { code, data, show, msg } = response.data
        switch (code) {
            case RequestCodeEnum.SUCCESS: //成功
                if (show) {
                    msg && feedback.msgSuccess(msg)
                }
                return data
            case RequestCodeEnum.FAIL: //失败
                if (show) {
                    msg && feedback.msgError(msg)
                }
                return Promise.reject(data)
            case RequestCodeEnum.LOGIN_FAILURE: //token过期
                clearAuthInfo()
                router.push(PageEnum.LOGIN)
                return Promise.reject()
            case RequestCodeEnum.OPEN_NEW_PAGE: //重定向打开页面
                window.location.href = data.url
                return data
            default:
                return data
        }
    },
    responseInterceptorsCatchHook(error) {
        NProgress.done()
        if (error.code !== AxiosError.ERR_CANCELED) {
            error.message && feedback.msgError(error.message)
        }
        return Promise.reject(error)
    }
}
```

--------------------------------

### 菜单类型枚举 (TypeScript)

Source: https://doc.likeadmin.cn/php/develop/admin

定义了菜单的三种类型：目录、菜单和按钮，用于区分菜单在UI中的渲染方式和功能。

```typescript
export enum MenuEnum {
    CATALOGUE = 'M', //目录
    MENU = 'C', //菜单
    BUTTON = 'A' //按钮
}
```

--------------------------------

### Axios 默认请求配置 (TypeScript)

Source: https://doc.likeadmin.cn/php/develop/admin

定义了系统默认的 Axios 请求配置，包括超时时间、基础 URL、请求头、钩子函数以及各种请求选项。

```typescript
const defaultOptions: AxiosRequestConfig = {
    //接口超时时间
    timeout: configs.timeout,
    // 基础接口地址
    baseURL: configs.baseUrl,
    //请求头
    headers: { 'Content-Type': ContentTypeEnum.JSON, version: configs.version },
    // 处理 axios的钩子函数
    axiosHooks: axiosHooks,
    // 每个接口可以单独配置
    requestOptions: {
        // 是否将params视为data参数，仅限post请求
        isParamsToData: true,
        //是否返回默认的响应
        isReturnDefaultResponse: false,
        // 需要对返回数据进行处理
        isTransformResponse: true,
        // 接口拼接地址
        urlPrefix: configs.urlPrefix,
        // 忽略重复请求
        ignoreCancelToken: false,
        // 是否携带token
        withToken: true,
        // 开启请求超时重新发起请求请求机制
        isOpenRetry: true,
        // 重新请求次数
        retryCount: 2
    }
}
```

--------------------------------

### 自定义指令 v-perms 实现

Source: https://doc.likeadmin.cn/php/develop/admin

实现一个名为 `v-perms` 的自定义指令，用于处理用户操作权限。指令通过检查用户拥有的权限与指令值中的权限列表进行比对，决定是否渲染元素。

```typescript
/**
 * perm 操作权限处理
 * 指令用法：
 *  <el-button v-perms="['auth.menu/edit']">编辑</el-button>
 */
import useUserStore from '@/stores/modules/user'
export default {
    mounted: (el: HTMLElement, binding: any) => {
        const { value } = binding
        const userStore = useUserStore()
        const permissions = userStore.perms
        const all_permission = '*'
        if (Array.isArray(value)) {
            if (value.length > 0) {
                const hasPermission = permissions.some((key: string) => {
                    return all_permission == key || value.includes(key)
                })
                if (!hasPermission) {
                    el.parentNode && el.parentNode.removeChild(el)
                }
            }
        } else {
            throw new Error('like v-perms="[\'auth.menu/edit\']"')
        }
    }
}
```

--------------------------------

### 静态路由配置 (TypeScript)

Source: https://doc.likeadmin.cn/php/develop/admin

定义了应用中的静态路由，包括错误页面、登录页面以及多级路由布局。

```typescript
export const constantRoutes: Array<RouteRecordRaw> = [
    {
        path: PageEnum.ERROR_404,
        component: () => import('@/views/error/404.vue')
    },
    {
        path: PageEnum.ERROR_403,
        component: () => import('@/views/error/403.vue')
    },
    {
        path: PageEnum.LOGIN,
        component: () => import('@/views/account/login.vue')
    },
    //多级路由：LAYOUT布局
    {
        path: '/user',
        component: LAYOUT,
        children: [
            {
                path: 'setting',
                component: () => import('@/views/user/setting.vue'),
                meta: {
                    title: '个人设置'
                }
            }
        ]
    },
    {
        path: '/dev_tools',
        component: LAYOUT,
        children: [
            {
                path: 'code/edit',
                component: () => import('@/views/dev_tools/code/edit.vue'),
                meta: {
                    title: '编辑数据表',
                    activeMenu: '/dev_tools/code'
                }
            }
        ]
    },
    {
        path: '/setting',
        component: LAYOUT,
        children: [
            {
                path: 'dict/data',
                component: () => import('@/views/setting/dict/data/index.vue'),
                meta: {
                    title: '数据管理',
                    activeMenu: '/setting/dict'
                }
            }
        ]
    }
    //要添加路由可直接在这里加
]
```

--------------------------------

### 按钮权限控制指令 (Vue)

Source: https://doc.likeadmin.cn/php/develop/admin

展示了如何使用自定义指令 `v-perms` 来控制按钮的显示和隐藏，实现按钮级别的权限控制。

```vue
// auth.admin/edit 需要与添加菜单时的权限字符一致，一般对应服务端的api接口
<el-button v-perms="['auth.admin/edit']">编辑</el-button>
//多个控制一个按钮
<el-button v-perms="['auth.admin/edit','auth.admin/add']">编辑</el-button>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.