request签名，路由拦截，登录页接口

hejianhao

2025-01-08 0acfbaaa37bc80abfb4e3c1468756200f9a7e935

request签名，路由拦截，登录页接口

 package.json

@@ -12,6 +12,7 @@
    "@tailwindcss/postcss7-compat": "^2.2.17",
    "axios": "^1.5.0",
    "core-js": "^2.6.5",
    "crypto-js": "^4.2.0",
    "element-ui": "^2.15.14",
    "ezuikit-js": "^7.7.10",
    "moment": "^2.29.4",

 src/App.vue

@@ -5,7 +5,8 @@
</template>

<script>

import './utils/app.css'
import './utils/basics.less'
export default {
  name: "app",
  components: {
@@ -23,4 +24,17 @@
};
</script>

<style lang='less'></style>
<style lang='less'>
::-webkit-scrollbar {
  display: none;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(245, 245, 245);
}
</style>

 src/assets/img/loginBg.png

 src/assets/img/logo@2x.png

 src/assets/img/mima@2x.png

 src/assets/img/yanzhengma@2x.png

 src/assets/img/youxiang@2x.png

 src/config/baseurl.js

New file
@@ -0,0 +1,14 @@
const apiConfig = {
    // 开发环境
    development: {
        baseURL: "http://47.108.239.173:2020/00001_api/webhook",
        secretKEY: ''
    },
    // 生产环境
    production: {
        baseURL: "http://47.108.239.173:2020/00001_api/webhook",
        secretKEY: ''
    },
};

export default apiConfig[process.env.NODE_ENV];

 src/layouts/components/AppContent.vue

@@ -1,5 +1,3 @@
<template>
  <div>
    <router-view />
  </div>
</template>

 src/router/index.js

@@ -41,9 +41,24 @@
];

const router = new VueRouter({
  mode: "history",
  mode: "hash",
  base: process.env.BASE_URL,
  routes,
});

// 前置路由拦截器
router.beforeEach((to, from, next) => {
  console.log(to.path);

  // 没有登录并且要去的页面不是登录页面，强制跳转到登录
  if (!localStorage.getItem('extra') && to.path !== '/login') {
    next('/login');
  } else {
    if (to.path === '/login') {
      localStorage.clear();
    }
    next();
  }
});

export default router;

 src/utils/basics.less

@@ -1,4 +1,12 @@
each(range(300), {
    .w--@{value} {
        width: (@value * 1px);
    }

    .h--@{value} {
        height: (@value * 1px);
    }

    .fs--@{value} {
        font-size: (@value * 1px);
    }

 src/utils/request.js

@@ -1,4 +1,6 @@
import axios from 'axios'
import CryptoJS from 'crypto-js';
import apiConfig from '@/config/baseurl'

import {
  Message
@@ -6,7 +8,7 @@


const service = axios.create({
  baseURL: `http://192.168.110.34:8081`,
  baseURL: apiConfig.baseURL,
  withCredentials: false, // 当跨域请求时发送cookie
  timeout: 30000, // request timeout
})
@@ -14,7 +16,18 @@
// 请求拦截
service.interceptors.request.use(
  config => {
    config['headers']['Authorization'] = `${localStorage.getItem('token')}`
    const env = process.env.NODE_ENV; //development  production
    let { url } = config;
    if (env === 'production') {
      url = url.replace(/.$/, '0');
      config.url = url;
    }

    const nowTime = Date.now()
    const sign = CryptoJS.HmacSHA1(nowTime, apiConfig.secretKEY).toString(CryptoJS.enc.Base64)

    config['headers']['timestamp'] = nowTime
    config['headers']['sign'] = sign
    if (config.method == 'get') {
      if (!config.params) config.params = {};
      config.params = {
@@ -41,19 +54,19 @@
      return
    }
    const res = response;
    if (res.data.code == 200) {
    if (res.data.status == 0) {
      if (!res.data) {
        return Promise.resolve({})
      }
      return Promise.resolve(res.data)
    } else {
      if (res.data.code == 103 || res.data.code == 401) {
      if (res.data.status == 103 || res.data.status == 401) {
        Message({
          message: res.data.msg || '登录已过期，请重新登录',
          type: 'warning',
          duration: 2000
        })
        window.location.replace('/Login');
        window.location.replace('/login');
        return Promise.reject(res.data)
      }
      Message({

 src/view/Login.vue

@@ -1,23 +1,169 @@
<template>
    <div class="content">
        1
        <div class="login_box">
            <img src="../assets/img/logo@2x.png" class="w--255 h--95 mt--57" />
            <div class="my--33 fs--28 lh--28 font-bold color1">客户登录</div>
            <div class="flex a-center px--14 py--19 text_box">
                <img src="../assets/img/youxiang@2x.png" class="w--20 h--15 mr--25 shrink0" />
                <el-input v-model="account" placeholder="请输入邮箱" />
            </div>
            <div class="flex a-center mt--16 px--14 py--19 text_box">
                <img src="../assets/img/mima@2x.png" class="w--18 h--20 mr--26 shrink0" />
                <el-input show-password v-model="pwd" placeholder="请输入密码" />
            </div>
            <div class="flex a-center mt--16 pl--14 text_box">
                <img src="../assets/img/yanzhengma@2x.png" class="w--18 h--20 mr--26 shrink0" />
                <el-input v-model="code" placeholder="请输入验证码" />
                <div class="code pointer">{{ codeStr }}</div>
            </div>
            <div @click="loginFun" class="mt--53 fs--18 lh--27 font-bold py--18 px--158 br--6 pointer bgcolor1">登录</div>
        </div>
    </div>
</template>

<script>
import { generateVerificationCode } from '@/utils/utils';
import { login } from './login'
import CryptoJS from 'crypto-js';
export default {
    components: {},
    props: {},
    data() {
        return {
            account: 'c106@264ej217.com.cn',
            pwd: '123456',
            code: '',
            codeStr: '',
        };
    },
    computed: {},
    watch: {},
    created() {},
    created() {
        this.codeStr = generateVerificationCode()
    },
    mounted() { },
    methods: {},
    methods: {
        loginFun() {
            if (!this.account) {
                this.$message({
                    message: '请输入邮箱',
                    type: 'warning'
                });
                return
            }
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!emailPattern.test(this.account)) {
                this.$message({
                    message: '请输入有效的邮箱地址',
                    type: 'warning'
                });
                return;
            }
            if (!this.pwd) {
                this.$message({
                    message: '请输入密码',
                    type: 'warning'
                });
                return
            }
            if (!this.code) {
                this.$message({
                    message: '请输入验证码',
                    type: 'warning'
                });
                return
            }
            if (!this.codeStr.match(new RegExp(this.code, "i"))) {
                this.$message({
                    message: '验证码错误',
                    type: 'warning'
                });
                this.codeStr = generateVerificationCode()
                return
            }
            login({
                account: this.account,
                pwd: CryptoJS.HmacMD5(this.pwd, 'password').toString(
                    CryptoJS.enc.Hex,
                ),
                type: 2
            }).then((result) => {
                localStorage.setItem('extra', result.data.extra);
                localStorage.setItem('userInfo', JSON.stringify(result.data));
                this.$router.push({ path: '/index' });
            })
        }
    },
};
</script>
<style scoped lang="less">
.bgcolor1 {
    background: #014099;
    color: #FFFFFF;
}

.color1 {
    color: #3B3F56;
}

.content {
    position: relative;
    background-image: url("../assets/img/loginBg.png");
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
}

.login_box {
    position: absolute;
    top: 50%;
    right: 178px;
    transform: translateY(-50%);
    width: 535px;
    height: 612px;
    background: #FFFFFF;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .text_box {
        width: 352px;
        background: #F9F9F9;
        border-radius: 6px;
        border: 1px solid #DFDFDF;

        .code {
            padding: 19px 0;
            text-align: center;
            flex-shrink: 0;
            width: 80px;
            height: 100%;
            background: #014099;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 16px;
        }
    }


    ::v-deep .el-input {
        .el-input__inner {
            background-color: transparent;
            border: unset;
            padding: 0;
            height: unset;
            line-height: 16px;
        }

        .el-input__inner::placeholder {
            font-size: 16px;
            font-weight: 400;
        }

        .el-input__icon {
            line-height: unset;
        }
    }
}
</style>

 src/view/login.js

New file
@@ -0,0 +1,7 @@
import axios from '@/utils/request';


//登录
export const login = (data) => {
    return axios.post('/zj0FFk5wx4S05X-zj1pJ2B2g2y0Xb-1', data)
}