521登录页

src/router/index.js

@@ -47,7 +47,16 @@ const router = createRouter({
           keepAlive:false, // 需要缓存
           title: '主页'
       },   
-  },
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('@/views/login/index.vue'),
+      meta: {
+        keepAlive: false,
+        title: '登录'
+      }
+    },
       {
         path: '/vueflow',
         name:'vueflow',
@@ -65,8 +74,9 @@ const router = createRouter({
           keepAlive:false, // 需要缓存
           title: 'vueflow'
       },   
-  },
-        
+    },
+    
+
     ]
 })
 //修改动态网页标题 beforeEach 导航钩子，路由改变前触发

src/settings.js

@@ -1,6 +1,7 @@
 export const title = '前沿动力';
 export const fixedHeader = true;
 export const TokenKey = 'CAE_token';
+export const UserIdKey = 'CAE_userId';
 export const LoginUrl = 'logUrl';
 export const Caegw_ProUrl="";
-export const Caegw_LogUrl="";
+export const Caegw_LogUrl="/login";

src/utils/request.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import store from '@/store'
-import { getToken } from '@/utils/token';
+import { getToken,getUserId,removeToken,removeUserId } from '@/utils/token';
 import { DES3 } from '@/utils/3des';
 import router from '@/router/index'
 import { ElMessage } from '../utils/message.js'
@@ -61,42 +61,10 @@ axios.interceptors.response.use(res => {
     if (data.returnCode == successCode) {
       return Promise.resolve(data)
     } else {
-      if (data.returnMsg === '系统没有登录或会话超时!') {
-        store.dispatch('user/changeState', {
-          key: 'token',
-          value: ''
-        })
-        store.dispatch('user/changeState', {
-          key: 'name',
-          value: ''
-        })
-        store.dispatch('user/changeState', {
-          key: 'userId',
-          value: ''
-        })
-        store.dispatch('user/changeState', {
-          key: 'loginStatus',
-          value: false
-        })
-        MessageBox.confirm('系统没有登录或会话超时, 是否登录?', '提示', {
-          confirmButtonText: '登录',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-          .then(() => {
-            MessageBox.close()
-            // window.location.hash = "/login/index";
-            // window.location.href = "#/login/index";
-            // router.replace(`/login/index`)
-             // this.$router.replace('/login/index')
-             let logUrl = window.location.protocol+"//"+window.location.host+"/"+Caegw_LogUrl;
-             // console.log(logUrl);
-             window.location.href=logUrl
-          })
-          .catch(() => {
-            Message.info('已取消！')
-            MessageBox.close()
-          })
+      if (data.returnMsg === '系统没有登录或会话超时!' || data.returnMsg === '用户验证失败！') {
+        removeToken();
+        removeUserId();
+        router.replace({ path: '/login' });
       }
       return Promise.reject(data)
     }
@@ -141,8 +109,8 @@ function getUrl(channelNo = 'service') {
 //配置上行报文公共包头
 function getParams(params, channelNo) {
  // params['clientToken'] = "11112";
-  params['clientToken'] = "e47b87eec69545559d1e81e56626da68";
-  let userId ='5f06c8bc77234f969d13e160b54c27e3';
+  params['clientToken'] = getToken()||"e47b87eec69545559d1e81e56626da68";
+  let userId =getUserId() ||'5f06c8bc77234f969d13e160b54c27e3';
   // let userId = store.getters.userId;
   // if (userId) {
   params['userId'] = userId;
@@ -223,7 +191,7 @@ const getImage = (id, channelNo = 'server') => {
 
 //加密密码
 const enPassword = (password) => {
-  let token = store.getters.token || getToken();
+  let token =  getToken() || store.token;
   return DES3.encrypt(token, password);
 }
 

src/utils/token.js

@@ -1,5 +1,5 @@
 import Cookies from 'js-cookie' // 引入js-cookie插件
-import { TokenKey } from '@/settings' // 引入settings.js
+import { TokenKey,UserIdKey} from '@/settings' // 引入settings.js
 
 /**
  * 前端uuid
@@ -32,3 +32,21 @@ export function setToken(token) {
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
+
+// 获取 userId
+export function getUserId() {
+  if (Cookies.get(UserIdKey) == null || Cookies.get(UserIdKey) == '' || Cookies.get(UserIdKey) == 'undefined') {
+    setUserId('guest') // 默认给一个值，实际可以根据需要进行修改
+  }
+  return Cookies.get(UserIdKey)
+}
+
+// 设置 userId
+export function setUserId(userId) {
+  return Cookies.set(UserIdKey, userId)
+}
+
+// 移除 userId
+export function removeUserId() {
+  return Cookies.remove(UserIdKey)
+}

src/views/login/index.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="login-container">
+    <!-- 背景图 -->
+    <img class="background-image" :src="loginbg" alt="背景图">
+    
+    <!-- 登录框 -->
+    <div class="login-form-container">
+      <div class="login-box">
+        <el-card class="login-card" shadow="never">
+          <template #header>
+            <div class="login-header">
+              <img :src="loginLogo" alt="logo" class="login-logo"/>
+              <h2>欢迎登录</h2>
+            </div>
+          </template>
+
+          <el-form
+            :model="loginForm"
+            :rules="loginRules"
+            ref="loginFormRef"
+            @keyup.enter="handleLogin"
+          >
+            <el-form-item prop="username" label="邮箱：" style="margin-bottom: 20px;">
+              <el-input
+                v-model="loginForm.username"
+                placeholder="请输入用户名"
+                prefix-icon="User"
+                clearable
+              />
+            </el-form-item>
+
+            <el-form-item prop="password" label="密码：">
+              <el-input
+                v-model="loginForm.password"
+                placeholder="请输入密码"
+                prefix-icon="Lock"
+                show-password
+                clearable
+              />
+            </el-form-item>
+          
+            <el-form-item prop="remember">
+              <div style="width: 100%; display: flex; justify-content: space-between;">
+                <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
+                <el-link type="info">忘记密码</el-link>
+              </div>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button
+                type="primary"
+                class="login-btn"
+                :loading="loading"
+                @click="handleLogin"
+              >
+                登 录
+              </el-button>
+            </el-form-item>
+          </el-form>
+        
+          <div class="login-footer">
+            <div class="register-prompt">没有账号？点击</div>
+            <el-link type="primary">注册</el-link>
+          </div>
+        </el-card>
+      </div>
+      
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+import router from "@/router"
+import { request,enPassword } from "@/utils/request"
+
+import { getToken, setToken, setUserId} from "@/utils/token"
+
+import loginbg from '@/assets/img/login-bg.png'
+import loginLogo from '@/assets/img/login-logo.png'
+// 表单引用
+const loginFormRef = ref(null)
+
+// 登录表单数据
+const loginForm = reactive({
+  username: '',
+  password: '',
+  remember: false
+})
+
+// 加载状态
+const loading = ref(false)
+
+// 表单验证规则
+const loginRules = reactive({
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
+  ]
+})
+
+// 登录方法
+const handleLogin = () => {
+  loginFormRef.value.validate(valid => {
+    if (!valid) return
+    
+    loading.value = true
+    
+    const params = {
+      transCode: "A00002",
+      loginName: loginForm.username,
+      password: enPassword(loginForm.password),
+      type: "",
+    }
+    console.log(params)
+    request(params)
+    .then((res) => {
+      setToken(res.clientToken)
+      setUserId(res.userId)
+      router.push({ path: "/" })
+    })
+    .catch((err) => {
+      console.error('错误信息：',err);
+      ElMessage.error(err.returnMsg);
+      loading.value = false;
+    })
+    .finally(() => {
+      loading.value = false
+    });
+    
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.login-container {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  min-width: 1200px;
+  min-height: 600px;
+  overflow: auto;
+}
+
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  z-index: 0;
+}
+
+.login-form-container {
+  position: absolute;
+  left: 60%;
+  width: 40%;
+  height: 100%;
+}
+
+.login-box {
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-card {
+  border: none !important;
+  width: 60%;
+  background-color: transparent;
+  :deep(.el-card__header) {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
+
+.login-header {
+  text-align: start;
+  width: 75%;
+
+  h2 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 500;
+    color: #2D2D2D;
+    margin: 10px 0;
+  }
+}
+
+.login-logo {
+  width: 70px;
+  margin-bottom: 10px;
+}
+
+.login-btn {
+  width: 100%;
+  height: 42px;
+  margin-top: 10px;
+  font-size: 16px;
+  background-color: #2267B1;
+}
+
+.login-footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.register-prompt {
+  margin-right: 5px;
+  font-size: 13px;
+}
+
+</style>