feat: 增加权限授权管理

src/options/App.vue

@@ -1,17 +1,20 @@
 <template>
   <v-app id="inspire">
-    <v-alert :value="!$store.state.initialized" type="error">配置信息加载失败，没有获取到系统定义信息，请尝试刷新当前页面</v-alert>
-    <template v-if="$store.state.initialized && havePermissions">
-      <!-- 导航栏 -->
-      <Navigation v-model="drawer"></Navigation>
-      <!-- 顶部工具条 -->
-      <Topbar v-model="drawer"></Topbar>
-      <!-- 内容显示区域 -->
-      <Content/>
-      <!-- 页脚 -->
-      <Footer/>
+    <v-alert :value="initializing" type="info">{{ words.initializing }}</v-alert>
+    <template v-if="!initializing">
+      <v-alert :value="!$store.state.initialized" type="error">{{ words.error }}</v-alert>
+      <template v-if="$store.state.initialized && havePermissions">
+        <!-- 导航栏 -->
+        <Navigation v-model="drawer"></Navigation>
+        <!-- 顶部工具条 -->
+        <Topbar v-model="drawer"></Topbar>
+        <!-- 内容显示区域 -->
+        <Content/>
+        <!-- 页脚 -->
+        <Footer/>
+      </template>
+      <Permissions v-else @update="reload"/>
     </template>
-    <Permissions v-else @update="reload"/>
   </v-app>
 </template>
 
@@ -33,9 +36,14 @@ export default {
   },
   data() {
     return {
+      words: {
+        error: "配置信息加载失败，没有获取到系统定义信息，请尝试刷新当前页面",
+        initializing: "程序正在准备一些数据，请稍候……"
+      },
       baseColor: "amber",
       drawer: this.$store.state.options.navBarIsOpen,
-      havePermissions: false
+      havePermissions: false,
+      initializing: true
     };
   },
   created() {
@@ -48,10 +56,12 @@ export default {
         },
         result => {
           this.havePermissions = result;
+          this.initializing = false;
         }
       );
     } else {
       this.havePermissions = false;
+      this.initializing = false;
     }
   },
   watch: {

src/options/components/Navigation.vue

@@ -101,6 +101,11 @@ export default Vue.extend({
               title: "参数备份与恢复",
               icon: "restore",
               key: "/set-backup"
+            },
+            {
+              title: "权限设置",
+              icon: "verified_user",
+              key: "set-permissions"
             }
             // {
             //   title: "语言",

src/options/components/Permissions.vue

@@ -1,30 +1,57 @@
 <template>
   <v-layout class="mt-3">
-    <v-flex xs12 sm6 offset-sm3>
+    <v-flex xs12 sm8 offset-sm2>
       <v-card>
         <v-img src="./assets/banner/default.jpg" aspect-ratio="2.75"></v-img>
 
         <v-card-title class="pb-1">
           <div v-if="!cancelled">
             <h3 class="title mb-2">{{ words.title }}</h3>
             <h3>{{ words.subtitle }}</h3>
+
+            <v-data-table
+              v-model="selected"
+              :headers="headers"
+              :items="items"
+              item-key="key"
+              select-all
+              hide-actions
+            >
+              <template v-slot:items="props">
+                <td>
+                  <v-checkbox v-model="props.selected" primary hide-details></v-checkbox>
+                </td>
+                <td>{{ props.item.title }}</td>
+                <td>
+                  <v-switch
+                    true-value="true"
+                    false-value="false"
+                    :input-value="props.item.enabled?'true':'false'"
+                    hide-details
+                    @click.stop="updatePermissions(props.item)"
+                  ></v-switch>
+                </td>
+              </template>
+            </v-data-table>
             <div class="mt-1 ml-3">
               <li
                 class="subheading"
                 v-for="(item, index) in words.permissions"
                 :key="index"
               >{{item}}</li>
             </div>
-            <div class="logo">
-              <v-img src="./assets/icon-64.png" width="64"></v-img>
-            </div>
           </div>
 
           <div v-else class="title mb-2">{{ words.cancelled }}</div>
         </v-card-title>
 
         <v-card-actions v-if="!cancelled">
-          <v-btn flat color="success" @click="authorize">{{ words.authorize }}</v-btn>
+          <v-btn
+            flat
+            color="success"
+            :disabled="selected.length==0"
+            @click="authorize"
+          >{{ words.authorize }}</v-btn>
           <v-btn flat color="orange" @click="cancel">{{ words.cancel }}</v-btn>
         </v-card-actions>
       </v-card>
@@ -38,16 +65,32 @@ export default Vue.extend({
     return {
       words: {
         title: "感谢您选择 PT 助手",
-        subtitle: "现在距成功仅有一步之遥，助手需要以下权限才能正常使用：",
+        subtitle: "为了不影响正常使用，请对需要的功能进行授权：",
         authorize: "授权",
         cancel: "我不用了",
-        permissions: [
-          "所有网站的访问权限，用于搜索和读取做种数据；",
-          "活动选项卡的读取权限，用于显示助手图标；"
-        ],
         cancelled: "世界如此之大，期待有缘再相会！"
       },
-      cancelled: false
+      permissions: [
+        {
+          key: "*://*/*",
+          title: "所有网站的访问权限，用于搜索和读取做种数据；",
+          isOrigin: true
+        },
+        { key: "tabs", title: "活动选项卡的读取权限，用于显示助手图标；" },
+        { key: "downloads", title: "下载权限，用于批量下载种子文件" }
+      ],
+      selected: [] as any,
+      headers: [
+        {
+          text: "权限描述",
+          align: "left",
+          sortable: false,
+          value: "title"
+        },
+        { text: "已授权", align: "left", value: "enabled", sortable: false }
+      ],
+      cancelled: false,
+      items: [] as any
     };
   },
   methods: {
@@ -56,23 +99,75 @@ export default Vue.extend({
      */
     authorize() {
       if (chrome && chrome.permissions) {
-        // 权限必须在用户操作下请求，例如按钮单击的事件处理函数。
-        chrome.permissions.request(
-          {
-            permissions: ["tabs"],
-            origins: ["*://*/*"]
-          },
-          granted => {
-            this.$emit("update", granted);
+        let options = {
+          permissions: [] as any,
+          origins: [] as any
+        };
+        this.selected.forEach((item: any) => {
+          if (item.isOrigin) {
+            options.origins.push(item.key);
+          } else {
+            options.permissions.push(item.key);
           }
-        );
+        });
+        // 权限必须在用户操作下请求，例如按钮单击的事件处理函数。
+        chrome.permissions.request(options, granted => {
+          this.$emit("update", granted);
+        });
       } else {
         this.$emit("update", true);
       }
     },
     cancel() {
       this.cancelled = true;
+    },
+    updatePermissions(item: any) {
+      item.enabled = !(<boolean>item.enabled);
+      let options = {};
+      if (item.isOrigin) {
+        options = {
+          origins: [item.key]
+        };
+      } else {
+        options = {
+          permissions: [item.key]
+        };
+      }
+      if (item.enabled) {
+        chrome.permissions.request(options, granted => {
+          item.enabled = granted;
+        });
+      } else {
+        chrome.permissions.remove(options, granted => {
+          item.enabled = !granted;
+        });
+      }
+
+      console.log(item);
     }
+  },
+  created() {
+    if (chrome && chrome.permissions) {
+    } else {
+      this.items = this.permissions;
+      return;
+    }
+    this.permissions.forEach(item => {
+      let options = {};
+      if (item.isOrigin) {
+        options = {
+          origins: [item.key]
+        };
+      } else {
+        options = {
+          permissions: [item.key]
+        };
+      }
+      // 查询当前权限
+      chrome.permissions.contains(options, result => {
+        this.items.push(Object.assign({ enabled: result }, item));
+      });
+    });
   }
 });
 </script>

src/options/router.ts

@@ -117,6 +117,11 @@ export default new Router({
       path: "/statistic/:host?",
       name: "statistic",
       component: () => import("./views/statisticCharts/SiteBase.vue")
+    },
+    {
+      path: "/set-permissions",
+      name: "set-permissions",
+      component: () => import("./components/Permissions.vue")
     }
   ]
 });