登录界面的CSS样式，添加请求拦截器

小七写Bug

已于 2022-08-23 14:14:49 修改

阅读量270

点赞数

分类专栏：前端开发 less 文章标签： css 前端

于 2022-08-23 14:08:55 首次发布

本文链接：https://blog.csdn.net/qq_51758070/article/details/126483499

版权

前端开发同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

less

3 篇文章 0 订阅

订阅专栏

首先，在App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

    body {
        padding: 0;
        margin: 0;
    }
    html,body {
      margin: 0;
      height: 100%;
    }
    #app {
      margin: 0;
      height: 100%;
    }

确保页面的高度能够撑起来

其次，在登录界面login.vue

<template>
<div id="login">
    <div class="loginForm">
        <el-form  :model="form" ref="form" label-width="100px" class="form" @keyup.enter.native="login">
            <div class="h3">购物车管理平台</div>
            <el-form-item label="用户名" class="item">
                <el-input autofocus v-model="form.userId" ref="userId" class="loginId" placeholder="请输入用户名" ></el-input>
            </el-form-item>
            <el-form-item label="密码" class="item">
                <el-input v-model="form.userPass" show-password ref="userPass" class="userPass" placeholder="请输入密码" ></el-input>
            </el-form-item>
            <el-form-item class="item1">
                <el-button type="primary" class="loginBtn" @click="login" >登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

#login{
        height: 100%;
        background: url('../../assets/background.jpg') center center fixed no-repeat;
        background-size: cover;
    }
    .loginForm{
        /* height:100vh; */
        height: 100%;
        display: flex;
        justify-content: center;
        align-items:center
    }
    .form{
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 40%;
        margin-left: 50%;
        padding-right: 80px;
        padding-top: 80px;	
        padding-bottom: 50px;
        box-shadow: 0 0 25px #cac6c6;
        border-radius: 20px;
        background:white;
    }
    .h3{
        padding-bottom: 7%;
        font-size: 22px;
        font-weight:600;
        text-align: center;
        padding-left: 20%;
    }
    
    .item1{
        margin-top: 20px;
    }

    .loginBtn{
        left: 10%;
        width: 100%;
        border-radius: 20px;
    }

最后，添加请求拦截器，每次请求在都请求头上添加token信息。在main.js界面

// http request 请求拦截器
request.interceptors.request.use(
  config => {
    // 这里判断sessionStorage里面是否存在token，如果有则在请求头里面设置
    if (sessionStorage.getItem('token')) {
      config.headers.token = sessionStorage.getItem('token');
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)