基于Cordova在Angular 6中处理Android权限问题

嘿，我来帮你搞定这个Android 6及以上版本的动态权限申请问题！结合Angular TypeScript环境，咱们用最常用的Cordova权限插件就能轻松解决，下面是具体步骤：

1. 安装Cordova权限插件 #

首先安装官方推荐的cordova-plugin-android-permissions插件，它专门处理Android动态权限：

cordova plugin add cordova-plugin-android-permissions

2. 添加TypeScript类型定义 #

因为咱们用的是TypeScript，得给插件加类型声明才能在Angular里正常提示和编译：

npm install @types/cordova-plugin-android-permissions --save-dev

3. 封装Angular权限服务（推荐） #

为了让权限逻辑更清晰，咱们可以封装一个Angular服务，方便各个组件调用。创建permission.service.ts：

import { Injectable } from '@angular/core';
declare var cordova: any;

@Injectable({
  providedIn: 'root'
})
export class PermissionService {
  private permissions = cordova.plugins.permissions;

  // 检查指定权限是否已授权
  checkPermission(permission: string): Promise<boolean> {
    return new Promise((resolve) => {
      this.permissions.checkPermission(permission, (status) => {
        resolve(status.hasPermission);
      }, (error) => {
        console.error('检查权限出错:', error);
        resolve(false);
      });
    });
  }

  // 请求指定权限
  requestPermission(permission: string): Promise<boolean> {
    return new Promise((resolve) => {
      this.permissions.requestPermission(permission, (status) => {
        if (status.hasPermission) {
          resolve(true);
        } else {
          // 处理用户拒绝的情况，比如提示引导开启权限
          console.warn('权限被拒绝');
          resolve(false);
        }
      }, (error) => {
        console.error('请求权限出错:', error);
        resolve(false);
      });
    });
  }

  // 示例：检查并请求相机权限
  async checkAndRequestCameraPermission(): Promise<boolean> {
    const hasPermission = await this.checkPermission(this.permissions.CAMERA);
    if (!hasPermission) {
      return await this.requestPermission(this.permissions.CAMERA);
    }
    return true;
  }

  // 你可以根据需求添加其他权限的方法，比如存储、位置等
  async checkAndRequestStoragePermission(): Promise<boolean> {
    const hasPermission = await this.checkPermission(this.permissions.READ_EXTERNAL_STORAGE);
    if (!hasPermission) {
      return await this.requestPermission(this.permissions.READ_EXTERNAL_STORAGE);
    }
    return true;
  }

  // 引导用户跳转到应用设置页（处理永久拒绝权限的情况）
  openAppSettings() {
    this.permissions.openAppSettings();
  }
}

4. 在Angular组件中使用服务 #

比如在需要使用相机的组件里，调用这个服务：

import { Component } from '@angular/core';
import { PermissionService } from './permission.service';

@Component({
  selector: 'app-camera',
  templateUrl: './camera.component.html'
})
export class CameraComponent {
  constructor(private permissionService: PermissionService) {}

  async openCamera() {
    // 先检查并申请相机权限
    const hasCameraPermission = await this.permissionService.checkAndRequestCameraPermission();
    if (hasCameraPermission) {
      // 权限已授权，执行相机相关逻辑
      console.log('可以打开相机啦！');
      // 这里写你的Cordova相机插件调用代码
    } else {
      // 权限被拒绝，提示用户去设置里开启
      alert('需要相机权限才能使用此功能，请在设置中开启权限');
      // 可以添加按钮引导用户跳转到设置页
      // this.permissionService.openAppSettings();
    }
  }
}

5. 注意事项 #

• 权限常量可以直接通过cordova.plugins.permissions获取，比如CAMERA、READ_EXTERNAL_STORAGE、ACCESS_FINE_LOCATION等，对应Android的权限名称。
• 如果用户永久拒绝权限（勾选了“不再询问”），请求权限会直接失败，这时候调用openAppSettings()引导用户去系统设置开启权限是很有必要的。
• 确保你的config.xml里已经声明了对应的权限（虽然Android 6+需要动态申请，但清单声明还是不能少）。

这样就能在Angular TypeScript环境里完美处理Android 6及以上版本的动态权限申请啦！

内容的提问来源于stack exchange，提问作者Dana