使用插件权限

本练习的目的是更好地了解如何启用或禁用插件权限，它们在哪里描述以及如何使用插件的默认权限。

最后，您将能够查找和使用任意插件的权限，并了解如何自定义现有权限。您将拥有一个使用插件和插件特定权限的 Tauri 应用程序示例。

1. 创建 Tauri 应用程序

   创建您的 Tauri 应用程序。在我们的示例中，我们将使用 create-tauri-app

   Bash

   sh <(curl https://create.tauri.app/sh)

   PowerShell

   irm https://create.tauri.app/ps | iex

   Fish

   sh (curl -sSL https://create.tauri.app/sh | psub)

   npm

   npm create tauri-app@latest

   Yarn

   yarn create tauri-app

   pnpm

   pnpm create tauri-app

   deno

   deno run -A npm:create-tauri-app

   bun

   bun create tauri-app

   Cargo

   cargo install create-tauri-app --locked
   cargo create-tauri-app

   我们将在此逐步说明中使用 pnpm，但您可以选择其他包管理器并在命令中相应地替换它。

   显示解决方案

   pnpm create tauri-app

   ✔ Project name · plugin-permission-demo
   ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
   ✔ Choose your package manager · pnpm
   ✔ Choose your UI template · Vanilla
   ✔ Choose your UI flavor · TypeScript
   
   Template created! To get started run:
   cd plugin-permission-demo
   pnpm install
   pnpm tauri dev

2. 将 file-system 插件添加到您的应用程序

   要搜索现有插件，您可以使用多种资源。

   最直接的方法是查看您的插件是否已在文档的 插件 部分，因此是 Tauri 维护的插件集的一部分。文件系统插件是 Tauri 插件工作区的一部分，您可以通过遵循说明将其添加到您的项目中。

   如果该插件是社区工作的一部分，您很可能在 crates.io 上搜索 tauri-plugin-<您的插件名称> 时找到它。

   显示解决方案

   如果它是我们工作区中的现有插件，您可以使用自动化方式

   pnpm tauri add fs

   如果您在 crates.io 上找到了它，您需要手动将其添加为依赖项并修改 Tauri 构建器以初始化插件

   cargo add tauri-plugin-fs

   修改 lib.rs 以初始化插件

   src-tauri/src/lib.rs

   #[cfg_attr(mobile, tauri::mobile_entry_point)]
   fn run() {
     tauri::Builder::default()
       .plugin(tauri_plugin_fs::init())
       .run(tauri::generate_context!())
       .expect("error while running tauri application");
   }

3. 了解 fs 插件的默认权限

   每个插件都有一个 default 权限集，其中包含所有权限和范围，以便开箱即用该插件，并具有合理的最小功能集。

   对于官方维护的插件，您可以在文档中找到渲染的描述（例如 fs default）。

   如果您正在为社区插件查找此信息，您需要查看插件的源代码。这应该在 your-plugin/permissions/default.toml 中定义。

   显示解决方案

   "$schema" = "schemas/schema.json"
   
   [default]
   description = """
   # Tauri `fs` default permissions
   
   This configuration file defines the default permissions granted
   to the filesystem.
   
   ### Granted Permissions
   
   This default permission set enables all read-related commands and
   allows access to the `$APP` folder and sub directories created in it.
   The location of the `$APP` folder depends on the operating system,
   where the application is run.
   
   In general the `$APP` folder needs to be manually created
   by the application at runtime, before accessing files or folders
   in it is possible.
   
   ### Denied Permissions
   
   This default permission set prevents access to critical components
   of the Tauri application by default.
   On Windows the webview data folder access is denied.
   
   """
   permissions = ["read-all", "scope-app-recursive", "deny-default"]

4. 查找正确的权限

   此步骤旨在找到您需要为您的命令提供给前端的权限，并最大限度地减少对您系统的访问。

   fs 插件具有自动生成的权限，可以禁用或启用单个命令并允许或禁用全局范围。

   这些可以在文档或插件的源代码 (fs/permissions/autogenerated) 中找到。

   假设我们想要启用向用户 $HOME 文件夹中的文本文件 test.txt 写入。

   为此，我们将在自动生成的权限中搜索允许写入文本文件的权限，例如 allow-write-text-file，然后搜索允许我们访问 $HOME/test.txt 文件的范围。

   我们需要将这些添加到我们的 src-tauri/tauri.conf.json 中的 capabilities 部分，或添加到 src-tauri/capabilities/ 文件夹中的文件中。默认情况下，src-tauri/capabilities/default.json 中已经有一个我们可以修改的功能。

   显示解决方案

   src-tauri/capabilities/default.json

   {
     "$schema": "../gen/schemas/desktop-schema.json",
     "identifier": "default",
     "description": "Capability for the main window",
     "windows": [
       "main"
     ],
     "permissions": [
       "path:default",
       "event:default",
       "window:default",
       "app:default",
       "image:default",
       "resources:default",
       "menu:default",
       "tray:default",
       "shell:allow-open",
       "fs:default",
       "fs:allow-write-text-file",
     ]
   }

   由于 fs 插件中只有自动生成的范围可以访问完整的 $HOME 文件夹，因此我们需要配置自己的范围。此范围应仅为 write-text-file 命令启用，并且应仅公开我们的 test.txt 文件。

   显示解决方案

   src-tauri/capabilities/default.json

      {
     "$schema": "../gen/schemas/desktop-schema.json",
     "identifier": "default",
     "description": "Capability for the main window",
     "windows": [
       "main"
     ],
     "permissions": [
       "path:default",
       "event:default",
       "window:default",
       "app:default",
       "image:default",
       "resources:default",
       "menu:default",
       "tray:default",
       "shell:allow-open",
       "fs:allow-write-text-file",
       {
         "identifier": "fs:allow-write-text-file",
         "allow": [{ "path": "$HOME/test.txt" }]
       },
     ]
   }

5. 实际测试权限

   添加必要的权限后，我们需要确认我们的应用程序可以访问文件并写入其内容。

   显示解决方案

   我们可以在应用程序中使用此片段写入文件

   src/main.ts

   import { writeTextFile, BaseDirectory } from '@tauri-apps/plugin-fs';
   
   let greetInputEl: HTMLInputElement | null;
   
   async function write(message: string) {
       await writeTextFile('test.txt', message, { baseDir: BaseDirectory.Home });
   }
   
   window.addEventListener("DOMContentLoaded", () => {
     greetInputEl = document.querySelector("#greet-input");
     document.querySelector("#greet-form")?.addEventListener("submit", (e) => {
       e.preventDefault();
       if (!greetInputEl )
         return;
   
       write(greetInputEl.value == "" ? "No input provided": greetInputEl.value);
   
     });
   });

   使用此代码片段替换 src/main.ts 意味着在使用纯 Vanilla+Typescript 应用程序时，我们无需修改默认的 index.html。在运行中的应用程序的输入字段中输入任何内容，在提交时都将写入文件。

   现在我们来实际测试一下

   pnpm run tauri dev

   在输入并点击“提交”后，我们可以通过终端模拟器或手动打开主文件夹中的文件进行检查。

   cat $HOME/test.txt

   您应该会看到您的输入，并完成了在 Tauri 应用程序中使用插件权限的学习。🥳

   如果您遇到此错误

   [Error] Unhandled Promise Rejection: fs.write_text_file not allowed. Permissions associated with this command: fs:allow-app-write, fs:allow-app-write-recursive, fs:allow-appcache-write, fs:allow-appcache-write-recursive, fs:allow-appconf...
   (anonymous function) (main.ts:5)

   那么您很可能没有正确遵循之前的说明。