云e办前端学习（二）登录界面的逻辑编写

前言

本系列博客基于B站的云e办管理系统，前端和后端我都自己敲了一遍，这里做一个学习记录。云e办的原始视频链接如下：https://www.bilibili.com/video/BV1Ai4y1P7Tk?p=1

---

首先创建登录的vue页面

配置路由，这里建议把vue-router的版本改成3.X，我这里使用的是3.5版本，不然以后会遇见问题

编写Login的页面之前，准备一下处理请求的工具类

首先是去控制台安装axios组件进行跨域处理

npm install axios

编写工具类

import axios from 'axios'
import {
    Loading, Message } from 'element-ui'
import router from 'vue-router'


//  请求拦截器
axios.interceptors.request.use(success => {
   
    if (window.sessionStorage.getItem('tokenStr')) {
   
        success.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
    }
    return success;
}, error => {
   
    console.log(error);
})

// 响应拦截器
axios.interceptors.response.use(success => {
   
    if (success.status && success.status == 200) {
   
        if (success.data.code == 500 || success.data.data == 401 || success.data.code == 403) {
   
            Message.error({
    message: success.data.message });
            return;
        }
        if (success.data.message) {
   
            Message.success({
    message: success.data.message });
        }
    }
    return success.data;
}, error => {
   
    if (error.response.code == 504 || error.response.code == 404) {
   
        Message.error({
    message: "服务器被吃了!" });
    } else if (error.response.code == 403) {
   
        Message.error({
    message: "权限不足,请联系管理员!" })
    } else if (error.response.code == 401) {
   
        Message.error({
    message: "没有登录,请进行登录" });
        router.replace('/');
    } else {
   
        if (error.response.data.message) {
   
            Message.error({
    message: error.response.data.message })
        } else {
   
            Message.error({
    message: '未知错误' })
        }
    }
    return;
});
let base = '';

//  传送json格式的post请求
export const postRequest = (url, params) => {
   
    return axios({
   
        method: 'post',
        url: `${
   base}${
   url}`,
        data: params
    })
}

export const putRequest = (url, params) => {
   
    return axios({
   
        method: 'put',
        url: `$