功能特性

安装

npm install @winner-fed/plugin-access

基本配置

import{defineConfig}from'win';exportdefaultdefineConfig({plugins:[require.resolve('@winner-fed/plugin-access')],access:{roles:{admin:['/','/admin','/users/*'],normal:['/normal','/profile'],guest:['/login','/register']}}});

使用方法

1. 路由配置

// src/app.tsimport{accessasaccessApi}from'winjs';// 设置默认角色accessApi.setRole('admin');exportconstaccess={noFoundHandler({ next}){// 处理404页面constaccessIds=accessApi.getAccess();if(!accessIds.includes('/404')){accessApi.setAccess(accessIds.concat(['/404']));}next('/404');},unAccessHandler({ next}){// 处理无权限访问next('/403');},ignoreAccess:['/login','/register']// 忽略权限检查的路由};

2. 组件中使用

使用 v-access 指令

<template>  <div><!-- 只有有权限的用户才能看到-->    <divv-access="'/admin'">管理员内容</div><!-- 支持动态权限-->    <divv-access="dynamicPath">动态内容</div><!-- 支持通配符-->    <divv-access="'/users/*'">用户管理</div>  </div></template><script setup>import {ref }from'vue';constdynamicPath=ref('/profile');</script>

使用 Access 组件

<template>  <div>    <Accessid="/admin">      <template #default>        <div>管理员专用功能</div>      </template>    </Access>  </div></template>

使用 useAccess Hook

<template>  <div>    <divv-if="hasAdminAccess">管理员功能</div>    <divv-if="hasUserAccess">用户功能</div>  </div></template><script setup>import {useAccess }from'winjs';consthasAdminAccess=useAccess('/admin');consthasUserAccess=useAccess('/users/*');</script>

3. 编程式权限控制

import{access}from'winjs';// 设置角色access.setRole('admin');// 设置权限access.setAccess(['/admin','/users']);// 检查权限（异步）consthasAccess=awaitaccess.hasAccess('/admin');// 检查权限（同步）consthasAccessSync=access.hasAccessSync('/admin');// 获取当前角色constcurrentRole=access.getRole();// 获取当前权限列表constcurrentAccess=access.getAccess();// 路径匹配constisMatch=access.match('/users/profile',['/users/*']);// 设置预设权限access.setPresetAccess(['/public','/common']);

API 文档

配置项

access.roles

access.noFoundHandler

access.unAccessHandler

access.ignoreAccess

Access 对象方法

setRole(roleId: string | Promise)

getRole(): string

setAccess(accessIds: string[] | Promise<string[]>)

getAccess(): string[]

hasAccess(path: string): Promise

hasAccessSync(path: string): boolean

match(path: string, accessIds: string[]): boolean

setPresetAccess(accessIds: string | string[])

isDataReady(): boolean

useAccess Hook

consthasAccess=useAccess(path:string|Ref<string>):Ref<boolean>

高级用法

1. 异步权限设置

import{access}from'winjs';// 异步设置角色access.setRole(fetch('/api/user/role').then(res=>res.json()));// 异步设置权限access.setAccess(fetch('/api/user/permissions').then(res=>res.json()));

2. 动态权限更新

import{access}from'winjs';// 用户登录后更新权限functiononLogin(userInfo){access.setRole(userInfo.role);access.setAccess(userInfo.permissions);}// 用户登出后清空权限functiononLogout(){access.setRole('guest');access.setAccess([]);}

3. 权限通配符

4. 权限组合

// 预设权限 + 角色权限 + 动态权限access.setPresetAccess(['/public','/common']);access.setRole('admin');// 自动获取 admin 对应的权限access.setAccess(['/special']);// 额外的动态权限

许可证