Merge pull request #8 from FleyX/dev

Dev

openRenamerBackend/api/PublicApi.ts

@@ -0,0 +1,13 @@
+import { Context } from "koa";
+import config from "../config";
+
+const router = {};
+
+/**
+ * 判断token是否正确
+ */
+router["POST /public/checkToken"] = async function (ctx: Context) {
+	ctx.body = ctx.request.body.token === config.token;
+};
+
+export default router;

openRenamerBackend/config.ts

@@ -6,6 +6,7 @@ const rootPath = path.resolve(__dirname, '..');
 let config = {
   rootPath,
   port: process.env.PORT ? parseInt(process.env.PORT) : 8089,
+  token: process.env.TOKEN ? process.env.TOKEN : null,
   urlPrefix: '/openRenamer/api',
   //是否为windows平台
   isWindows: process.platform.toLocaleLowerCase().includes("win"),
@@ -18,7 +19,8 @@ let config = {
       keepExtenstions: true,
       maxFieldsSize: 1024 * 1024
     }
-  }
+  },
+  publicPath: new Set(["POST/public/checkToken"])
 };
 
 export default config;

openRenamerBackend/middleware/handleError.ts

@@ -1,8 +1,15 @@
 import log from '../util/LogUtil';
+import config from "../config";
 
 let f = async (ctx, next) => {
 	try {
-		await next();
+		//检查是否有密码
+		if (checkToken(ctx)) {
+			await next();
+		} else {
+			ctx.status = 401;
+			ctx.body = "密钥验证错误";
+		}
 	} catch (error: any) {
 		if (error.status != undefined) {
 			ctx.status = error.status;
@@ -14,4 +21,16 @@ let f = async (ctx, next) => {
 	}
 }
 
+function checkToken(ctx) {
+	if (!config.token) {
+		return true;
+	}
+	let requestPath = ctx.method + ctx.path.replace(config.urlPrefix, "");
+	if (config.publicPath.has(requestPath)) {
+		return true;
+	}
+	return config.token == ctx.headers.token;
+
+}
+
 export default f;

openRenamerFront/src/App.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="app">
     <div class="content">
-      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
-        <el-menu-item index="dealCenter">处理中心</el-menu-item>
-      </el-menu>
       <router-view />
     </div>
     <div class="footer">版本：{{ version }}&nbsp;&nbsp;开源地址:<a href="https://github.com/FleyX/open-renamer">open-renamer</a></div>
@@ -11,6 +8,7 @@
 </template>
 
 <script>
+import httpUtil from "./utils/HttpUtil";
 export default {
   name: "Home",
   data() {
@@ -19,6 +17,11 @@ export default {
       version: "0.7",
     };
   },
+  async created() {
+    let token = localStorage.getItem("token");
+    window.token = token;
+    await httpUtil.get("/file/isWindows");
+  },
 };
 </script>
 

openRenamerFront/src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Home from "../views/home/Home.vue";
+import Login from "../views/public/login";
 
 const routes = [
   {
@@ -7,7 +8,11 @@ const routes = [
     name: "Home",
     component: Home,
   },
-
+  {
+    path: "/public/login",
+    name: "login",
+    component: Login,
+  },
 ];
 
 const router = createRouter({

openRenamerFront/src/utils/HttpUtil.js

@@ -1,4 +1,5 @@
 import * as http from 'axios';
+import router from '../router/index';
 
 /**
  * 请求
@@ -10,12 +11,13 @@ import * as http from 'axios';
  * @param {*} redirect 接口返回未认证是否跳转到登陆
  * @returns 数据
  */
-async function request(url, method, params, body, isForm) {
+async function request (url, method, params, body, isForm) {
   let options = {
     url,
     baseURL: '/openRenamer/api',
     method,
     params,
+    headers: { token: window.token }
   };
   if (isForm) {
     options.headers['Content-Type'] = 'multipart/form-data';
@@ -27,7 +29,14 @@ async function request(url, method, params, body, isForm) {
   try {
     res = await http.default.request(options);
   } catch (err) {
-    window.vueInstance.config.globalProperties.$message.error('发生了某些异常问题');
+    console.log(Object.keys(err));
+    console.log(err.response);
+    if (err.response.status == 401) {
+      window.vueInstance.config.globalProperties.$message.error('密钥验证错误');
+      router.push("/public/login");
+    } else {
+      window.vueInstance.config.globalProperties.$message.error('发生了某些异常问题');
+    }
     throw err;
   }
   return res.data;
@@ -39,7 +48,7 @@ async function request(url, method, params, body, isForm) {
  * @param {*} params url参数
  * @param {*} redirect 未登陆是否跳转到登陆页
  */
-async function get(url, params = null) {
+async function get (url, params = null) {
   return request(url, 'get', params, null, false);
 }
 
@@ -51,7 +60,7 @@ async function get(url, params = null) {
  * @param {*} isForm 是否表单数据
  * @param {*} redirect 是否重定向
  */
-async function post(url, params, body, isForm = false) {
+async function post (url, params, body, isForm = false) {
   return request(url, 'post', params, body, isForm);
 }
 
@@ -63,7 +72,7 @@ async function post(url, params, body, isForm = false) {
  * @param {*} isForm 是否表单数据
  * @param {*} redirect 是否重定向
  */
-async function put(url, params, body, isForm = false) {
+async function put (url, params, body, isForm = false) {
   return request(url, 'put', params, body, isForm);
 }
 
@@ -73,7 +82,7 @@ async function put(url, params, body, isForm = false) {
  * @param {*} params url参数
  * @param {*} redirect 是否重定向
  */
-async function deletes(url, params = null) {
+async function deletes (url, params = null) {
   return request(url, 'delete', params, null);
 }
 

openRenamerFront/src/views/public/login.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="app">
+    <el-input v-model="token" placeholder="请输入密钥" style="width: 40em; margin-bottom: 1em" />
+    <el-button type="primary" @click="checkToken">确认</el-button>
+  </div>
+</template>
+
+<script>
+import httpUtil from "../../utils/HttpUtil";
+export default {
+  name: "login",
+  data() {
+    return {
+      token: "",
+    };
+  },
+  methods: {
+    async checkToken() {
+      let res = await httpUtil.post("/public/checkToken", null, { token: this.token });
+      if (!res) {
+        this.$message.error("密钥错误");
+        return;
+      }
+      window.token = this.token;
+      localStorage.setItem("token", this.token);
+      this.$router.replace("/");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.app {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>