修改登录页

src/router/index.ts

@@ -18,22 +18,22 @@ router.beforeEach((to, from, next) => {
         window.existLoading = true
     }
     console.log(to)
-    // if (to.path == '/login' || to.path == '/404') {
+    if (to.path == '/login' || to.path == '/404') {
-    //     // 登录或者注册才可以往下进行
+        // 登录或者注册才可以往下进行
-    //     next()
+        next()
-    // } else {
+    } else {
-    //     // 获取 token
+        // 获取 token
-    //     const token = localStorage.getItem('toKen')
+        const token = localStorage.getItem('token')
-    //     // token 不存在
+        // token 不存在
-    //     if (token === null || token === '') {
+        if (token === null || token === '') {
-    //         ElMessage.error('您还没有登录，请先登录')
+            ElMessage.error('您还没有登录，请先登录')
-    //         next('/login')
+            next('/login')
-    //     } else {
+        } else {
-    //         next()
+            next()
-    //     }
+        }
-    // }
+    }
 
-    next()
+    // next()
 })
 
 // 路由加载后

src/stores/adminInfo.ts

@@ -10,7 +10,7 @@ export const useAdminInfo = defineStore('adminInfo', {
             nickname: '',
             avatar: '',
             last_login_time: '',
-            token: '',
+            token: localStorage.getItem('token') || '',
             refresh_token: '',
             super: false
         }
@@ -26,7 +26,7 @@ export const useAdminInfo = defineStore('adminInfo', {
         setToken(token: string, type: 'auth' | 'refresh') {
             const field = type == 'auth' ? 'token' : 'refresh_token'
             this[field] = token
-            window.localStorage.setItem('token', token)
+            window.localStorage.setItem(field, token)
         },
         getToken(type: 'auth' | 'refresh' = 'auth') {
             return type === 'auth' ? this.token : this.refresh_token

src/views/user/login.vue

@@ -1,62 +1,63 @@
 <template>
     <div>
         <div @contextmenu.stop="" id="bubble" class="bubble">
-            <div class="login-image"></div>
+            <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
-            <div class="login-container-form">
+        </div>
-                <div class="title-container">
+        <div class="login-image"></div>
-                    <div class="title">
+        <div class="login-container-form">
-                        <span style="font-size: 28px">电能质量数据监测云平台</span>
+            <div class="title-container">
-                    </div>
+                <div class="title">
+                    <span style="font-size: 28px">电能质量数据监测云平台</span>
                 </div>
-                <el-form :rules="rules" ref="formRef" size="large" class="login-form" :model="form">
-                    <el-form-item prop="username">
-                        <el-input
-                            ref="usernameRef"
-                            v-model="form.username"
-                            type="text"
-                            clearable
-                            placeholder="用户名"
-                            autocomplete="off"
-                        >
-                            <template #prefix>
-                                <span class="iconfont icon-yonghu" style="color: #003078"></span>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item prop="password">
-                        <el-input
-                            ref="passwordRef"
-                            v-model="form.password"
-                            type="password"
-                            placeholder="密码"
-                            show-password
-                            autocomplete="off"
-                        >
-                            <template #prefix>
-                                <span class="iconfont icon-mima" style="color: #003078"></span>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button
-                            :loading="state.submitLoading"
-                            class="submit-btn"
-                            round
-                            type="info"
-                            @click="onSubmit(formRef)"
-                        >
-                            登录
-                        </el-button>
-                    </el-form-item>
-                </el-form>
             </div>
-            <div class="copy-right">
+            <el-form :rules="rules" ref="formRef" size="large" class="login-form" :model="form">
-                <span>版权所有 @ 南京灿能电力自动化股份有限公司</span>
+                <el-form-item prop="username">
-                <br />
+                    <el-input
-                <img style="width: 20px; height: 20px; position: absolute" src="@/assets/login/jhui.png" />
+                        ref="usernameRef"
+                        v-model="form.username"
+                        type="text"
+                        clearable
+                        placeholder="用户名"
+                        autocomplete="off"
+                    >
+                        <template #prefix>
+                            <span class="iconfont icon-yonghu" style="color: #003078"></span>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                    <el-input
+                        ref="passwordRef"
+                        v-model="form.password"
+                        type="password"
+                        placeholder="密码"
+                        show-password
+                        autocomplete="off"
+                    >
+                        <template #prefix>
+                            <span class="iconfont icon-mima" style="color: #003078"></span>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button
+                        :loading="state.submitLoading"
+                        class="submit-btn"
+                        round
+                        type="info"
+                        @click="onSubmit(formRef)"
+                    >
+                        登录
+                    </el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="copy-right">
+            <span>版权所有 @ 南京灿能电力自动化股份有限公司</span>
+            <br />
+            <img style="width: 20px; height: 20px; position: absolute" src="@/assets/login/jhui.png" />
 
-                <span>　　苏公网安备 32011502011902号</span>
+            <span>　　苏公网安备 32011502011902号</span>
-            </div>
         </div>
     </div>
 </template>
@@ -64,15 +65,20 @@
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
 import * as pageBubble from '@/utils/pageBubble'
-import { sm3Digest } from '@/assets/commjs/sm3'
+import { sm3Digest } from '@/assets/commjs/sm3.js'
 import { sm2, encrypt } from '@/assets/commjs/sm2.js'
+import { ElMessage } from 'element-plus'
 import { gongkey, login } from '@/api/user'
+import { useAdminInfo } from '@/stores/adminInfo'
 import type { FormInstance, InputInstance, FormRules } from 'element-plus'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 let timer: number
 
 const formRef = ref<FormInstance>()
 const usernameRef = ref<InputInstance>()
 const passwordRef = ref<InputInstance>()
+const useInfo = useAdminInfo()
 interface RuleForm {
     username: string
     password: string
@@ -114,7 +120,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return
     await formEl.validate((valid, fields) => {
         if (valid) {
-            console.log()
+            state.submitLoading = true
             gongkey({ loginName: encrypt(form.username) }).then(res => {
                 window.localStorage.setItem('publicKey', res.data)
                 let jiamipassword = sm2(sm3Digest(form.password) + '|' + form.password, res.data, 0)
@@ -125,14 +131,23 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
                     imageCode: '',
                     verifyCode: 0
                 }).then(res => {
-                    window.localStorage.setItem('token', '123')
+                    if (res.code == 'A0000') {
+                        // window.localStorage.setItem('token', '123')
+                        useInfo.setToken(res.data.token_type + ' ' + res.data.access_token, 'auth')
+                        state.submitLoading = false
+                        router.push({
+                            path: '/admin/dashboard',
+                            name: 'dashboard'
+                        })
+                    } else {
+                        ElMessage({
+                            message: res.message,
+                            type: 'warning'
+                        })
+                        state.submitLoading = false
+                    }
                 })
             })
-            // routePush({ name: 'dashboard' })
-            // state.submitLoading = true
-            // setTimeout(() => {
-            //     state.submitLoading = false
-            // }, 3000)
         }
     })
 }
@@ -155,8 +170,8 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     position: absolute;
     top: 50%;
     left: 20%;
-    width: 45%;
+    min-width: 45%;
-    height: 80%;
+    min-height: 80%;
 
     background: url('../../assets/login/login2.png') no-repeat center center;
     background-size: contain;