feat:支持密钥登录

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>
@@ -19,6 +16,14 @@ export default {
       version: "0.6",
     };
   },
+  created() {
+    let token = localStorage.getItem("token");
+    if (token) {
+      window.token = token;
+    } else if (this.$route.path.indexOf("/public/login") == -1) {
+      this.$router.replace("/public/login");
+    }
+  },
 };
 </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) {
+    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>