页面登录，请求拦截，响应拦截，持久化存储，路由拦截等处理

shuishen

2024-10-30 c5558ae0a6152b56b2b487b94f3c616648104edd

 src/page/login.vue

@@ -1,21 +1,141 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 16:35:51
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-25 16:36:07
 * @FilePath: \bigScreen\src\page\login.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <div>

  <div class="box">
    <div class="login">
      <div class="logintitle">
        吉水化工园区“一园一策一图”VR平台
      </div>
      <div class="getingo">
        <p class="title">用户登录</p>
        <el-input type="text" class="input username" v-model="loginForm.username" />
        <el-input type="password" class="input password" v-model="loginForm.password" />
        <el-button class="loginto" type="primary" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
let router = useRouter()
import { ElLoading } from 'element-plus'
import { useLogin } from 'store/login'
const store = useLogin()

const loginForm = reactive({
  //租户ID
  tenantId: '000000',
  //部门ID
  deptId: '',
  //角色ID
  roleId: '',
  //用户名
  username: '',
  //密码
  password: '',
  //账号类型
  type: 'account',
  //验证码的值
  code: '',
  //验证码的索引
  key: '',
  //预加载白色背景
  image:
    'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
  flag: 1,
})

const login = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '登录中,请稍后。。。',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  store.LoginByUsername(loginForm).then(res => {
    console.log(res, 66666)
    router.push('/layout')
    loading.close()
  }).catch(() => {
    loading.close()
  })
}
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;

  .login {
    width: 100%;
    height: 100%;
    background: url('../assets/images/login-bg.png');
    background-size: 100% 100%;
    position: relative;

    .logintitle {
      position: absolute;
      top: 18%;
      right: 25%;
      transform: translateX(50%);
      font-size: 40px;
      color: #00afe9;
    }

    .getingo {
      width: 500px;
      position: absolute;
      text-align: center;
      top: 45%;
      right: 25%;
      transform: translateY(-40%) translateX(50%);
      color: #ffffff;
      padding: 30px;
      background: url('../assets/images/login-content-bg.png'),
        url('../assets/images/left-top.png') no-repeat left top,
        url('../assets/images/left-bottom.png') no-repeat left bottom,
        url('../assets/images/right-top.png') no-repeat right top,
        url('../assets/images/right-bottom.png') no-repeat right bottom;
      background-repeat: no-repeat;
      background-size: 100% 100%, 25px, 25px, 25px, 25px;

      .title {
        font-size: 20px;
      }

      :deep().el-input__inner {
        padding: 0px;
      }

      .input {
        margin: 30px 0;
        width: 300px;
        padding: 10px 0px;
        background-color: rgba(0, 0, 0, 0);
        color: #ffffff;
        padding-left: 40px;
        border-width: 0px;
        font-size: 18px;
      }

      .username {
        background: url('../assets/images/login-input.png') no-repeat,
          url('../assets/images/user-icon.png') no-repeat 10px center;
        background-size: 100% 100%, 20px;
      }

      .password {
        background: url('../assets/images/login-input.png') no-repeat,
          url('../assets/images/password-icon.png') no-repeat 10px center;
        background-size: 100% 100%, 20px;
      }

      .loginto {
        width: 300px;
        margin: 30px 0;
      }
    }
  }
}
</style>