添加 jwt 解码功能 #52

.gitignore

 .DS_Store
 /node_modules
-/temp_release
 /desktop/node_modules
 /dist
 /public/manifest.json
 /public/plugin.json
 /public/README.md
 /id_rsa.pem
-/public/_locales
 
 # local env files
 .env.local
@@ -27,4 +25,3 @@ yarn-error.log*
 *.sln
 *.sw*
 test.js
-/public/background.js

README.md

@@ -62,6 +62,7 @@ npm run serve -adapter=utools
 |JSON转实体类|`Java`, `C#`, `Go`, `Dart`|√|
 |ascii编码转换|`十进制`, `十六进制`, `八进制`, `二进制`, `字符串`|√|
 |变量名格式转换|`Var Name`, `var-name`, `VAR_NAME`, `VarName`, `varName`, `var_name`, `var name`|√|
+|jwt解码|`header`, `payload`|√|
 
 ## 第三方开源库
 项目诞生离不开这些优秀的开源程序
@@ -96,6 +97,7 @@ npm run serve -adapter=utools
 - [vue-codemirror](https://www.npmjs.com/package/vue-codemirror)
 - [sm-crypto](https://github.com/JuneAndGreen/sm-crypto)
 - [camelcaseplugin](https://github.com/netnexus/camelcaseplugin)
+- [jwt-decode](https://www.npmjs.com/package/jwt-decode)
 
  > 当然项目中还使用很多不知道姓名的大神的代码, 在这里就不一一感谢
  

package-lock.json

 {
     "name": "c-tool",
-    "version": "1.6.1",
+    "version": "1.6.2",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -6852,6 +6852,11 @@
             "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.3.1.tgz",
             "integrity": "sha512-zCTP6Qd/WwjrpuHFkJuXc5opRdKprUr7eI7+JCCtcetThJt45qptu82MWQ+eET+FtDrMo7+BYjo3iD0XIq1L9Q=="
         },
+        "jwt-decode": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+            "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+        },
         "killable": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",

package.json

@@ -23,6 +23,7 @@
         "js-yaml": "^3.14.1",
         "json-to-properties": "^1.1.3",
         "jsonlint": "^1.6.3",
+        "jwt-decode": "^3.1.2",
         "lodash": "^4.17.21",
         "lscache": "^1.3.0",
         "moment": "^2.29.1",

src/config.js

@@ -39,6 +39,7 @@ const tool = [
     {'name': 'jsonToObject', 'title': 'JSON转实体类', 'cat': ['conversion', 'serialize']},
     {'name': 'ascii', 'title': 'ascii转换', 'cat': ['conversion']},
     {'name': 'variableConversion', 'title': '变量名转换', 'cat': ['conversion']},
+    {'name': 'jwt', 'title': 'jwt解码', 'cat': ['conversion']},
 ]
 
 // 工具类功能配置
@@ -52,7 +53,8 @@ const feature = {
 const utools = {
     keyword: {
         hash: ['md5', 'sha1', 'sha256', 'sha512', 'sm3'],
-        encrypt: ['AES', 'DES', 'RC4', 'Rabbit', 'TripleDes', 'sm2']
+        encrypt: ['AES', 'DES', 'RC4', 'Rabbit', 'TripleDes', 'sm2'],
+        jwt: ['jwtDecode']
     },
     cmds: {
         timestamp: [

src/tool.router.js

@@ -101,6 +101,10 @@ const routes = [
     {
         path: '/tool/variableConversion',
         component: r => require(['./views/tool/variableConversion.vue'], r)
+    },
+    {
+        path: '/tool/jwt',
+        component: r => require(['./views/tool/jwt.vue'], r)
     }
 ]
 

src/views/tool/jwt.vue

 <template>
-    <heightResize @resize="resize">
-        <Row :gutter="10">
-            <Col span="12">
-                <input-block top="4px">
-                    <code-editor :height="editorheight" :placeholder="$t('jwt_input')"  hideLineNumbers v-model="current.input"></code-editor>
-                    <template slot="extra">
-                        <Checkbox v-model="current.header">header</Checkbox>
-                        <Checkbox v-model="current.payload">payload</Checkbox>
-                    </template>
-                </input-block>
-            </Col>
-            <Col span="12">
-                <code-editor :height="editorheight" :placeholder="$t('jwt_output')" :value="output" language="json"></code-editor>
-            </Col>
-        </Row>
-    </heightResize>
+    <div>
+        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
+        <option-block>
+            <FormItem>
+                <ButtonGroup>
+                    <Button type="primary" @click="handle('decode')">解码</Button>
+                </ButtonGroup>
+            </FormItem>
+            <FormItem>
+                <Checkbox v-model="current.header">header</Checkbox>
+                <Checkbox v-model="current.payload">payload</Checkbox>
+            </FormItem>
+        </option-block>
+        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
+    </div>
 </template>
 <script>
 import jwtDecode from "jwt-decode"
-import codeEditor from "./components/codeEditor";
-import jsonFormatter from "./library/formatter/json";
-import heightResize from "./components/heightResize";
 
 export default {
-    components: {
-        codeEditor,
-        heightResize
-    },
     created() {
-        this.$initToolData('input')
+        this.current = Object.assign(this.current, this.$getToolData("input"))
     },
-    computed: {
-        output() {
-            if(!this.current.input.trim()){
-                return ""
-            }
-            try {
-                let data = {};
-                if (this.current.header) {
-                    data.header = jwtDecode(this.current.input, {header: true})
-                }
-                if (this.current.payload) {
-                    data.payload = jwtDecode(this.current.input)
+    methods: {
+        handle(v) {
+            if (this.current.input) {
+                try {
+                    let data = {};
+                    if (this.current.header) {
+                        data.header = jwtDecode(this.current.input, {header: true})
+                    }
+                    if (this.current.payload) {
+                        data.payload = jwtDecode(this.current.input)
+                    }
+                    this.current.output = JSON.stringify(
+                        Object.keys(data).length === 1 ? data[Object.keys(data)[0]] : data,
+                        null,4
+                    );
+                    this.current.operation = v;
+                    this.$clipboardCopy(this.current.output);
+                    this.$saveToolData(this.current);
+                } catch (e) {
+                    this.$Message.error("解码失败")
+                    console.log(e)
                 }
-                this.$saveToolData(this.current);
-                return jsonFormatter.objectBeautify(
-                    Object.keys(data).length === 1 ? data[Object.keys(data)[0]] : data,
-                );
-            } catch (e) {
-                return this.$t('jwt_decode_fail',[e.message])
             }
         }
     },
-    methods:{
-        resize(height){
-            this.editorheight = height+"px"
-        }
-    },
     data() {
         return {
             current: {
                 input: "",
+                output: "",
                 header: false,
                 payload: true,
-            },
-            editorheight:"100%",
+                operation: ""
+            }
         }
     },
 }
-</script>
+</script>
\ No newline at end of file