useAuthorize

直接调起用户授权信息、获取用户授权信息

何时使用

当需要在使用某些权限功能前进行授权或校验时

API

const {
  authSetting,
  subscriptionsSetting,
  authorize,
  get,
  open
} = useAuthorize(withSubscriptions?: boolean, withAppAuthSetting?: boolean);

参数说明

参数	说明	类型	默认值
withSubscriptions	是否同时获取用户订阅消息的订阅状态，默认不获取	boolean	false
withAppAuthSetting	是否同时获取微信 APP 授权设置状态，默认不获取	boolean	false

返回值说明

返回值	说明	类型
authSetting	用户授权结果	AuthSetting & { mini: AuthSetting; app?: Taro.getAppAuthorizeSetting.Result; }
subscriptionsSetting	用户订阅消息设置	SubscriptionsSetting
open	调起客户端小程序设置界面	(withSubscriptions?: boolean) => Promise<OpenSettingSuccessCallbackResult>
get	获取用户授权信息	(withSubscriptions?: boolean) => Promise<GetSettingSuccessCallbackResult>
authorize	提前向用户发起授权请求	(scope: string, mini?: boolean) => Promise<General.CallbackResult>

代码演示

React

wechat/useAuthorize/index

import React from 'react';
import { useAuthorize, useModal } from 'taro-hooks';

import DemoContent from '@src/components/DemoContent';
import { Cell, Button } from '@taroify/core';

export default () => {
  const show = useModal({ title: '授权结果', mask: true, showCancel: false });

  const { authSetting, subscriptionsSetting, authorize, open } =
    useAuthorize(true);

  const handleAuth = async () => {
    let content = '授权成功';
    try {
      await authorize('scope.userInfo');
    } catch (e) {
      content = '授权失败';
    }
    show({ content });
  };

  return (
    <DemoContent>
      {Object.keys(authorize).length ? (
        [authSetting, subscriptionsSetting].map((auth) =>
          Object.entries(auth).map(([key, value]) => {
            return (
              <Cell.Group clickable title={key} key={key}>
                {['string', 'boolean'].includes(typeof value) ? (
                  <Cell key={key} title={'授权 - ' + key}>
                    {value}
                  </Cell>
                ) : (
                  Object.entries(value as {}).map(([subKey, subValue]) => (
                    <Cell key={subKey} title={'授权 - ' + subKey}>
                      {subValue}
                    </Cell>
                  ))
                )}
              </Cell.Group>
            );
          }),
        )
      ) : (
        <Cell>暂无信息</Cell>
      )}
      <Button
        block
        color="primary"
        className="gap"
        onClick={open}
        shape="square"
      >
        打开设置
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleAuth}
        shape="square"
      >
        授权
      </Button>
    </DemoContent>
  );
};

Vue

wechat/useAuthorize/index

<template>
  <demo-content>
    <nut-cell v-if="!emptyInfo">暂无信息</nut-cell>
    <template v-else v-for="auth in [authSetting, subscriptionsSetting]">
      <nut-cell-group
        v-for="(value, key) in auth"
        :title="'授权 - ' + key"
        :key="key"
      >
        <nut-cell
          v-if="['string', 'boolean'].includes(typeof value)"
          :title="'授权 - ' + key"
          :desc="String(value)"
        ></nut-cell>
        <nut-cell
          v-else
          v-for="(subValue, subKey) in value"
          :key="subKey"
          :title="'授权 - ' + subKey"
          :desc="String(subValue)"
        ></nut-cell>
      </nut-cell-group>
    </template>
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      @click="open(true)"
      >打开设置</nut-button
    >
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      @click="handleAuth()"
      >授权</nut-button
    >
  </demo-content>
</template>

<script setup lang="ts">
import { useAuthorize, useModal } from 'taro-hooks';

const show = useModal({ title: '授权结果', mask: true, showCancel: false });

const { authSetting, subscriptionsSetting, authorize, open } =
  useAuthorize(true);

const emptyInfo = Object.keys(authSetting)?.length;

const handleAuth = async () => {
  let content = '授权成功';
  try {
    await authorize('scope.userInfo');
  } catch (e) {
    content = '授权失败';
  }
  show({ content });
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️