feat: update code

package.json

@@ -24,7 +24,7 @@
         "dotenv": "latest",
         "dotenv-expand": "latest",
         "echarts": "^5.3.3",
-        "element-plus": "^2.2.13",
+        "element-plus": "^2.2.14",
         "highlight.js": "^11.6.0",
         "js-base64": "^3.7.2",
         "js-cookie": "latest",
@@ -40,8 +40,8 @@
         "vuex": "^4.0.2"
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^5.33.0",
-        "@typescript-eslint/parser": "^5.33.0",
+        "@typescript-eslint/eslint-plugin": "^5.33.1",
+        "@typescript-eslint/parser": "^5.33.1",
         "@vue/cli-plugin-babel": "~5.0.8",
         "@vue/cli-plugin-eslint": "~5.0.8",
         "@vue/cli-plugin-router": "~5.0.8",
@@ -61,7 +61,7 @@
         "style-resources-loader": "^1.5.0",
         "typescript": "~4.7.4",
         "vue-cli-plugin-element": "^1.0.1",
-        "vue-template-compiler": "^2.7.8",
+        "vue-template-compiler": "^2.7.9",
         "webpack": "^5.74.0"
     }
 }

src/api/token.ts

@@ -15,19 +15,19 @@
  */
 
 import request from '@/config/axios'
-import { LoginType, R } from '@/config/type/types'
+import { Login, R } from '@/config/type/types'
 
 /**
  * 通过用户名获取 Salt
  *
  * @param name 用户名
  * @returns {AxiosPromise}
  */
-export const generateSaltApi = (name: string) =>
+export const generateSaltApi = (login: Login) =>
     request<R>({
         url: `api/v3/token/salt`,
         method: 'post',
-        data: { name },
+        data: login,
     })
 
 /**
@@ -36,7 +36,7 @@ export const generateSaltApi = (name: string) =>
  * @param login {tenant, name, salt, password}
  * @returns {AxiosPromise}
  */
-export const generateTokenApi = (login: LoginType) =>
+export const generateTokenApi = (login: Login) =>
     request<R>({
         url: `api/v3/token/generate`,
         method: 'post',
@@ -49,11 +49,11 @@ export const generateTokenApi = (login: LoginType) =>
  * @param name 用户名
  * @returns {AxiosPromise}
  */
-export const cancelTokenApi = (name: string) =>
+export const cancelTokenApi = (login: Login) =>
     request<R>({
         url: `api/v3/token/cancel`,
         method: 'post',
-        data: { name },
+        data: login,
     })
 
 /**
@@ -62,7 +62,7 @@ export const cancelTokenApi = (name: string) =>
  * @param login {name, salt, token}
  * @returns {Promise}
  */
-export const checkTokenValidApi = (login: LoginType) =>
+export const checkTokenValidApi = (login: Login) =>
     request<R>({
         url: `api/v3/token/check`,
         method: 'post',

src/config/axios/index.ts

@@ -22,11 +22,13 @@ import store from '@/config/store'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 
-import { getStore } from '@/util/store'
-import common from '@/util/common'
+import { getStorage } from '@/util/StorageUtils'
+import CommonConstant from '@/util/CommonConstant'
 import { isNull } from '@/util/utils'
 import { warning } from '@/util/MessageUtils'
 
+import { encode } from 'js-base64'
+
 NProgress.configure({
     easing: 'ease',
     showSpinner: false,
@@ -50,10 +52,16 @@ request.interceptors.request.use(
     (config: AxiosRequestConfig) => {
         NProgress.start()
 
-        const token = getStore(common.TOKEN_HEADER, false)
-        if (!isNull(token)) {
+        const tenant = getStorage(CommonConstant.TENANT_HEADER)
+        const user = getStorage(CommonConstant.USER_HEADER)
+        const token = getStorage(CommonConstant.TOKEN_HEADER)
+        if (!isNull(tenant) && !isNull(user) && !isNull(token)) {
             const headers = config.headers
-            if (headers) headers[common.TOKEN_HEADER] = token
+            if (headers) {
+                headers[CommonConstant.TENANT_HEADER] = encode(tenant)
+                headers[CommonConstant.USER_HEADER] = encode(user)
+                headers[CommonConstant.TOKEN_HEADER] = encode(JSON.stringify(token))
+            }
         }
 
         return config

src/config/router/index.ts

@@ -20,8 +20,11 @@ import commonRouters from './common'
 import viewsRouters from './views'
 import operateRouters from './operate'
 
-import common from '@/util/common'
-import { getStore } from '@/util/store'
+import CommonConstant from '@/util/CommonConstant'
+import { getStorage } from '@/util/StorageUtils'
+import { checkTokenValidApi } from '@/api/token'
+import { isNull } from '@/util/utils'
+import { Login } from '../type/types'
 
 const router = createRouter({
     history: createWebHashHistory(process.env.BASE_URL),
@@ -37,10 +40,26 @@ router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, n
     if (from.name === 'login' || to.name === 'login') {
         next()
     } else {
-        if (!getStore(common.TOKEN_HEADER, false)) {
+        const tenant = getStorage(CommonConstant.TENANT_HEADER)
+        const user = getStorage(CommonConstant.USER_HEADER)
+        const token = getStorage(CommonConstant.TOKEN_HEADER)
+        if (isNull(tenant) || isNull(user) || isNull(token)) {
             next({ path: '/login' })
         } else {
-            next()
+            const login = {
+                tenant: tenant,
+                name: user,
+                salt: token.salt,
+                token: token.token,
+            } as Login
+            checkTokenValidApi(login)
+                .then((res) => {
+                    if (!res.data.ok) next({ path: '/login' })
+                    next()
+                })
+                .catch(() => {
+                    next({ path: '/login' })
+                })
         }
     }
 })

src/config/router/operate/index.ts

@@ -52,7 +52,7 @@ const routes: Array<RouteRecordRaw> = [
                 path: '/driver/detail',
                 meta: {
                     icon: 'el-icon-s-promotion',
-                    title: '驱动详情',
+                    title: '驱动信息',
                 },
                 component: () => import('@/views/driver/detail/DriverDetail.vue'),
             },
@@ -67,7 +67,7 @@ const routes: Array<RouteRecordRaw> = [
                 path: '/device/detail',
                 meta: {
                     icon: 'el-icon-s-finance',
-                    title: '设备详情',
+                    title: '设备信息',
                 },
                 component: () => import('@/views/device/detail/DeviceDetail.vue'),
             },
@@ -91,7 +91,7 @@ const routes: Array<RouteRecordRaw> = [
                 path: '/profile/detail',
                 meta: {
                     icon: 'el-icon-s-order',
-                    title: '模板详情',
+                    title: '模板信息',
                 },
                 component: () => import('@/views/profile/detail/ProfileDetail.vue'),
             },
@@ -109,7 +109,7 @@ const routes: Array<RouteRecordRaw> = [
                 path: '/profile/point/detail',
                 meta: {
                     icon: 'el-icon-s-order',
-                    title: '位号详情',
+                    title: '位号信息',
                 },
                 component: () => import('@/views/point/detail/PointDetail.vue'),
             },

src/config/store/modules/auth.ts

@@ -14,33 +14,36 @@
  * limitations under the License.
  */
 
-import md5 from 'js-md5'
-
-import common from '@/util/common'
-import { getStore, removeCookies, removeStore, setCookies, setStore } from '@/util/store'
-
 import router from '@/config/router'
+import { ElLoading } from 'element-plus'
+
 import { cancelTokenApi, generateSaltApi, generateTokenApi } from '@/api/token'
 
-import { ElLoading } from 'element-plus'
+import md5 from 'js-md5'
+import CommonConstant from '@/util/CommonConstant'
+import { getStorage, removeStorage, setStorage } from '@/util/StorageUtils'
+import { Login } from '@/config/type/types'
+import { isNull } from '@/util/utils'
 
 const auth = {
     namespaced: true,
     state: {
-        name: 'pnoker',
         tenant: 'default',
+        name: 'pnoker',
     },
     mutations: {
-        setToken: (state, token) => {
-            setCookies(common.TOKEN_HEADER, token)
-            setStore(common.TOKEN_HEADER, token, false)
+        setToken: (state, login) => {
+            setStorage(CommonConstant.TENANT_HEADER, login.tenant)
+            setStorage(CommonConstant.USER_HEADER, login.name)
+            setStorage(CommonConstant.TOKEN_HEADER, { salt: login.salt, token: login.token })
 
-            state.name = token.name
-            state.tenant = token.tenant
+            state.tenant = login.tenant
+            state.name = login.name
         },
         removeToken: () => {
-            removeCookies(common.TOKEN_HEADER)
-            removeStore(common.TOKEN_HEADER, false)
+            removeStorage(CommonConstant.TENANT_HEADER)
+            removeStorage(CommonConstant.USER_HEADER)
+            removeStorage(CommonConstant.TOKEN_HEADER)
         },
     },
     actions: {
@@ -49,15 +52,19 @@ const auth = {
                 lock: true,
                 text: '登录中,请稍后...',
             })
-            generateSaltApi(form.name)
+            const login = {
+                tenant: form.tenant,
+                name: form.name,
+            } as Login
+            generateSaltApi(login)
                 .then((res) => {
                     const salt = res.data.data
                     const login = {
                         tenant: form.tenant,
                         name: form.name,
                         salt: salt,
                         password: md5(md5(form.password) + salt),
-                    }
+                    } as Login
 
                     generateTokenApi(login)
                         .then((res) => {
@@ -74,9 +81,14 @@ const auth = {
                 .catch(() => loading.close())
         },
         logout({ commit }) {
-            const token = getStore(common.TOKEN_HEADER, false)
-            if (token && token.name) {
-                cancelTokenApi(token.name)
+            const tenant = getStorage(CommonConstant.TENANT_HEADER)
+            const user = getStorage(CommonConstant.USER_HEADER)
+            if (!isNull(tenant) && !isNull(user)) {
+                const login = {
+                    tenant: tenant,
+                    name: user,
+                } as Login
+                cancelTokenApi(login)
             }
             commit('removeToken')
         },

src/config/type/types.ts

@@ -27,11 +27,12 @@ export interface R<T = any> {
 /**
  * 登录信息
  */
-export interface LoginType {
+export interface Login {
     tenant: string
     name: string
     salt: string
     password: string
+    token: string
 }
 
 /**

src/util/common.ts → src/util/CommonConstant.ts

@@ -15,5 +15,7 @@
  */
 
 export default {
+    TENANT_HEADER: 'X-Auth-Tenant',
+    USER_HEADER: 'X-Auth-User',
     TOKEN_HEADER: 'X-Auth-Token',
 }

src/util/NotificationUtils.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2022 Pnoker All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ElNotification } from 'element-plus'
+import { isNull } from './utils'
+
+/**
+ * 成功操作
+ *
+ * @param message
+ */
+export const successMessage = (message?: string) => {
+    if (isNull(message)) {
+        message = '操作成功!'
+    }
+
+    ElNotification.success({
+        title: '成功',
+        message: message,
+    })
+}
+
+/**
+ * 失败操作
+ *
+ * @param message
+ * @param error
+ */
+export const failMessage = (message?: string, error?: any) => {
+    if (isNull(message)) {
+        message = '操作失败!'
+    }
+
+    if (error) {
+        console.error(error)
+    }
+
+    ElNotification.error({
+        title: '错误',
+        dangerouslyUseHTMLString: true,
+        message: `${message}`,
+    })
+}