公共逻辑

本模块还提供了一些公共逻辑以便于从模块中获取一些有用内容。

🎉 调用以下可组合项或函数时均有代码提示和注释。

useAuth 可组合项

该可组合项返回了登陆状态、用户信息、登陆注册工具函数,用法示例如下:

const {
  /**
   * 改变角色
   * @param role 角色
   */
  changeRole,
  /**
   * 刷新用户信息
   * @param token 令牌
   */
  refreshUser,
  /**
   * 登录
   * @param form 登录表单
   * @param options 登录选项
   */
  signIn,
  /**
   * 退出登录
   * @param options 退出登录选项
   */
  signOut,
  /**
   * 注册
   * @param form 注册表单
   * @param options 注册选项
   */
  signUp,
  /**
   * 刷新令牌
   * @param token 令牌
   * @param refreshToken 刷新令牌
   * @description 刷新令牌(只在 refresh provider 下生效)
   */
  refresh,
  /**
   * 权限列表
   */
  permissions,
  /**
   * 记住我
   */
  remember,
  /**
   * 角色列表
   */
  roles,
  /**
   * 登陆状态
   */
  status,
  /**
   * 令牌
   */
  token,
  /**
   * 用户信息
   */
  user,
} = useAuth();

$auth 函数

该函数返回了当前用户是否具有权限(无响应式),用法示例如下:

<template>
  <div>
    user
    <nuxt-link to="/"> to home </nuxt-link>
    <nuxt-link v-if="canAccess" to="/admin"> to admin </nuxt-link>
    <nuxt-link v-if="$auth('permission3')" to="/auth"> to auth </nuxt-link>
  </div>
</template>

<script setup lang="ts">
const canAccess = auth("|", role("admin"), "permission1", per("permission2"));
</script>

auth 可组合项

该可组合项返回了当前用户是否具有权限,用法示例如下:

<template>
  <div>
    user
    <nuxt-link to="/"> to home </nuxt-link>
    <nuxt-link v-if="canAccess" to="/admin"> to admin </nuxt-link>
    <nuxt-link v-if="$auth('permission3')" to="/auth"> to auth </nuxt-link>
  </div>
</template>

<script setup lang="ts">
const canAccess = auth("|", role("admin"), "permission1", per("permission2"));
</script>

per 函数

该函数反回一个权限封装,用法示例如下:

<template>
  <div>
    user
    <nuxt-link to="/"> to home </nuxt-link>
    <nuxt-link v-if="canAccess" to="/admin"> to admin </nuxt-link>
    <nuxt-link v-if="$auth('permission3')" to="/auth"> to auth </nuxt-link>
  </div>
</template>

<script setup lang="ts">
const canAccess = auth("|", role("admin"), "permission1", per("permission2"));
</script>

role 函数

该函数反回一个角色封装,用法示例如下:

<template>
  <div>
    user
    <nuxt-link to="/"> to home </nuxt-link>
    <nuxt-link v-if="canAccess" to="/admin"> to admin </nuxt-link>
    <nuxt-link v-if="$auth('permission3')" to="/auth"> to auth </nuxt-link>
  </div>
</template>

<script setup lang="ts">
const canAccess = auth("|", role("admin"), "permission1", per("permission2"));
</script>