编写插件权限

本练习旨在让您更好地了解在编写自己的插件时如何创建插件权限。

练习结束后，您将具备为插件创建简单权限的能力。您将获得一个示例 Tauri 插件，其中的权限部分是自动生成的，部分是手动编写的。

1. 创建 Tauri 插件

   在本示例中，我们将利用 Tauri cli 来引导 Tauri 插件的源代码结构。请确保已安装所有先决条件，并通过运行 cargo tauri info 来验证您是否安装了正确版本的 Tauri CLI。

   输出应显示 tauri-cli 版本为 2.x。在本分步说明中，我们将使用 pnpm，但您可以选择其他包管理器并相应地替换命令中的内容。

   一旦安装了较新版本，您就可以继续使用 Tauri CLI 创建插件了。

   显示解决方案

   mkdir -p tauri-learning
   cd tauri-learning
   cargo tauri plugin new test
   cd tauri-plugin-test
   pnpm install
   pnpm build
   cargo build

2. 创建新命令

   为了展示一些实用且简单的内容，让我们假设我们的命令将用户输入写入临时文件夹中的文件，同时向该文件添加一些自定义标题。

   我们将命令命名为 write_custom_file，在 src/commands.rs 中实现它，并将其添加到我们的插件构建器中，以便暴露给前端。

   Tauri 的核心工具将自动生成此命令的 allow 和 deny 权限，因此我们无需为此操心。

   显示解决方案

   命令实现

   src/commands.rs

   use tauri::{AppHandle, command, Runtime};
   
   use crate::models::*;
   use crate::Result;
   use crate::TestExt;
   
   #[command]
   pub(crate) async fn ping<R: Runtime>(
       app: AppHandle<R>,
       payload: PingRequest,
   ) -> Result<PingResponse> {
       app.test1().ping(payload)
   }
   
   #[command]
   pub(crate) async fn write_custom_file<R: Runtime>(
       user_input: String,
       app: AppHandle<R>,
   ) -> Result<String> {
       std::fs::write(app.path().temp_dir().unwrap(), user_input)?;
       Ok("success".to_string())
   }

   为您的新命令自动生成内置权限

   src/build.rs

   const COMMANDS: &[&str] = &["ping", "write_custom_file"];

   这些内置权限将由 Tauri 构建系统自动生成，并显示在 permissions/autogenerated/commands 文件夹中。默认情况下，会创建 enable-<command> 和 deny-<command> 权限。

3. 暴露新命令

   上一步是编写实际的命令实现。接下来，我们要将其暴露给前端，以便可以使用它。

   显示解决方案

   配置 Tauri 构建器以生成调用处理程序，从而将前端 IPC 请求传递给新实现的命令

   src/lib.rs

   pub fn init<R: Runtime>() -> TauriPlugin<R> {
   Builder::new("test")
       .invoke_handler(tauri::generate_handler![
           commands::ping,
           commands::write_custom_file,
       ])
       .setup(|app, api| {
           #[cfg(mobile)]
           let test = mobile::init(app, api)?;
           #[cfg(desktop)]
           let test = desktop::init(app, api)?;
           app.manage(test);
   
           // manage state so it is accessible by the commands
           app.manage(MyState::default());
           Ok(())
       })
       .build()
   }

   在前端模块中暴露新命令。

   此步骤对于示例应用程序成功导入前端模块至关重要。这仅为了方便起见，不会产生安全影响，因为命令处理程序已经生成，并且可以从前端手动调用该命令。

   guest-js/index.ts

   import { invoke } from '@tauri-apps/api/core'
   
   export async function ping(value: string): Promise<string | null> {
     return await invoke<{value?: string}>('plugin:test|ping', {
       payload: {
         value,
       },
     }).then((r) => (r.value ? r.value : null));
   }
   
   export async function writeCustomFile(user_input: string): Promise<string> {
    return await invoke('plugin:test|write_custom_file',{userInput: user_input});
   }

   提示

   invoke 参数需要是驼峰命名法 (CamelCase)。在此示例中，它是 userInput 而不是 user_input。

   确保您的包已构建

   pnpm build

4. 定义默认插件权限

   由于我们的插件默认应该暴露 write_custom_file 命令，我们应该将其添加到我们的 default.toml 权限中。

   显示解决方案

   将其添加到我们的默认权限集中，以允许我们刚刚暴露的新命令。

   permissions/default.toml

   "$schema" = "schemas/schema.json"
   [default]
   description = "Default permissions for the plugin"
   permissions = ["allow-ping", "allow-write-custom-file"]

5. 从示例应用程序调用测试命令

   创建的插件目录结构包含一个 examples/tauri-app 文件夹，其中有一个可直接使用的 Tauri 应用程序来测试插件。

   由于我们添加了一个新命令，我们需要稍微修改前端以改为调用我们的新命令。

   显示解决方案

   src/App.svelte

   <script>
     import Greet from './lib/Greet.svelte'
     import { ping, writeCustomFile } from 'tauri-plugin-test-api'
   
     let response = ''
   
     function updateResponse(returnValue) {
       response += `[${new Date().toLocaleTimeString()}]` + (typeof returnValue === 'string' ? returnValue : JSON.stringify(returnValue)) + '<br>'
     }
   
     function _ping() {
       ping("Pong!").then(updateResponse).catch(updateResponse)
     }
     function _writeCustomFile() {
       writeCustomFile("HELLO FROM TAURI PLUGIN").then(updateResponse).catch(updateResponse)
     }
   </script>
   
   <main class="container">
     <h1>Welcome to Tauri!</h1>
   
     <div class="row">
       <a href="https://vite.org.cn" target="_blank">
         <img src="/vite.svg" class="logo vite" alt="Vite Logo" />
       </a>
       <a href="https://tauri.org.cn" target="_blank">
         <img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
       </a>
       <a href="https://svelte.net.cn" target="_blank">
         <img src="/svelte.svg" class="logo svelte" alt="Svelte Logo" />
       </a>
     </div>
   
     <p>
       Click on the Tauri, Vite, and Svelte logos to learn more.
     </p>
   
     <div class="row">
       <Greet />
     </div>
   
     <div>
       <button on:click="{_ping}">Ping</button>
       <div>{@html response}</div>
     </div>
     <div>
       <button on:click="{_writeCustomFile}">Write</button>
       <div>{@html response}</div>
     </div>
   
   
   </main>
   
   <style>
     .logo.vite:hover {
       filter: drop-shadow(0 0 2em #747bff);
     }
   
     .logo.svelte:hover {
       filter: drop-shadow(0 0 2em #ff3e00);
     }
   </style>

   运行此操作并按下“Write”按钮，您应该会看到以下内容

   success

   您应该会在临时文件夹中找到一个 test.txt 文件，其中包含来自我们新实现的插件命令的消息。 🥳