笔记3：登录/退出流程【Vue实战项目：电商管理系统（Element-UI）】

た入场券 2022-10-12 04:19 204阅读 0赞

### 文章目录 ###

*   *  1 登录概述
     *   *  1.1 登录业务流程
         *  1.2 登录业务的相关技术点
     *  2 token原理分析
     *   *  3.1 创建分支
         *  3.2 删除初始项目不必要的文件
         *  3.3 创建登录组件
         *   *  3.3.1 创建登录页面
             *  3.3.2 创建登录页面底色
             *  3.3.3 创建登录框底色
             *  3.3.4 绘制头像
             *  3.3.5 绘制输入框和按钮
             *  3.3.6 表单数据绑定
             *  3.3.7 表单数据验证
             *  3.3.8 实现表单的重置功能
             *  3.3.9 实现登录前表单数据的预校验
             *  3.3.10 配置axios发起请求
             *  3.3.11 创建弹窗提示
             *  3.3.12 获取并存储token
             *  3.3.13 设置路由跳转
             *  3.3.14 设置路由守卫
             *  3.3.15 退出登录
     *  问题

## 1 登录概述 ##

### 1.1 登录业务流程 ###

1.  在登录页面输入用户名和密码
2.  调用后台接口进行验证
3.  通过验证后，根据后台的响应状态跳转到项目主页

### 1.2 登录业务的相关技术点 ###

1.  http是无状态的
2.  通过cookie在客户端记录状态
3.  通过session在服务端记录状态
4.  通过token方式维持状态

## 2 token原理分析 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70]

### 3.1 创建分支 ###

git checkout -b login

### 3.2 删除初始项目不必要的文件 ###

*  App.vue

<template>
      <div id="app">
         hello vue
      </div>
    </template>
    
    <script>
    export default {
      name: 'app'
    }
    </script>
    
    <style>
    
    </style>

*  router/index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    
    Vue.use(VueRouter)
    
    const routes = [
      
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router

*  删除`views/Home.vue`, `views/About.vue`, `components/HelloWorld.vue`

刷新页面后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 1]

### 3.3 创建登录组件 ###

#### 3.3.1 创建登录页面 ####

*  创建登录页：`/components/Login.vue`

<template>
        <div>
            登录组件
        </div>
    </template>
    
    <script>
    export default { };
    </script>
    
    <style lang="less" scoped>
    
    </style>

*  设置路由

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../components/Login.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {  path:'/', redirect: '/login'},
      {  path:'/login', component:Login}
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router

*  设置路由占位符  
    修改`App.vue`：

> 设置完成后，访问`http://localhost:8080/#`和`http://localhost:8080/#/login`均能跳转到Login页面

#### 3.3.2 创建登录页面底色 ####

*  Login.vue

<template>
      <div class="login_container">
      </div>
    </template>
    
    <style lang="less" scoped>
    .login_container { 
      background-color: #2b4b6b;
      height: 100%;
    }

*  创建全局样式css文件  
    …/assets/css/global.css

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

*  导入全局样式  
    main.js

import './assets/css/global.css'

#### 3.3.3 创建登录框底色 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 2]

*  Login.vue

<template>
      <div class="login_container">
        <div class="login_box"></div>
      </div>
    </template>
    
    <style lang="less" scoped>
    .login_container { 
      background-color: #2b4b6b;
      height: 100%;
    }
    
    .login_box { 
      width: 450px;
      height: 300px;
      background-color: #fff;
      border-radius: 3px; //圆角
      position: absolute; //绝对定位
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); // 水平垂直居中
    }
    </style>

#### 3.3.4 绘制头像 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 3]

*  Login.vue

...
    <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
    </div>
    ...

...
    <style lang="less" scoped>
      .avatar_box { 
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute; //绝对定位
        left: 50%;
        transform: translate(-50%, -50%); // 水平垂直居中
        background-color: rgb(255, 253, 253);
    
        img { 
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #eee;
        }
    ...
    </style>

#### 3.3.5 绘制输入框和按钮 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 4]

*  根据登录圆形图，需要使用的组件有：
    
     *  表单
     *  输入框
     *  按钮
 *  引入element-ui对应组件

> 在[官网][Link 1]上给出了很多示例模板，可以直接复制使用。

import Vue from 'vue'
    import {  Button } from 'element-ui'
    import {  Form, FormItem } from 'element-ui'
    import {  Input } from 'element-ui'
    
    Vue.use(Button)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Input)

*  完成布局  
    Login.vue

<template>
    ...
    
    <el-form label-width="0px" class="login_form">
    
    <el-form-item>
      <el-input prefix-icon="el-icon-user"></el-input>
    </el-form-item>
    
    <el-form-item>
      <el-input prefix-icon="el-icon-s-grid"></el-input>
    </el-form-item>
    
    <el-form-item class="btns">
      <el-button type="primary">登录</el-button>
      <el-button>取消</el-button>
    </el-form-item>
    </el-form>
    </template>
    ...
    
    <style lang="less" scoped>
    ...
    .login_form{ 
        position: absolute;
        bottom:0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .btns { 
        display: flex;
        justify-content: flex-end;
    }
    </style>

#### 3.3.6 表单数据绑定 ####

<template>
    ...
    
    <el-form :model="loginForm" label-width="0px" class="login_form">
    
    <el-form-item>
      <el-input
        v-model="loginForm.username"
        prefix-icon="el-icon-user"
      ></el-input>
    </el-form-item>
    
    <el-form-item>
      <el-input
        v-model="loginForm.password"
        prefix-icon="el-icon-s-grid"
        type="password"
      ></el-input>
    </el-form-item>
    ...
    
    <style lang="less" scoped>
    ...
    <script>
    export default { 
      data() { 
        return { 
          loginForm: { 
            username: "",
            password: "",
          },
        };
      },
    };
    </script>
    ...

> `v-model`与`:model`区别：  
> `v-model`通常用于input的双向数据绑定，也可以实现子组件到父组件数据的双向数据绑定。  
> `:model`是`v-bind:model`的缩写，只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。

#### 3.3.7 表单数据验证 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 5]

<template>
    ...
    
    <el-form
    :model="loginForm"
    :rules="loginFormRules"
    label-width="0px"
    class="login_form"
    >
    
    <el-form-item prop="username">
      <el-input
        v-model="loginForm.username"
        prefix-icon="el-icon-user"
      ></el-input>
    </el-form-item>
    
    <el-form-item prop="password">
      <el-input
        v-model="loginForm.password"
        prefix-icon="el-icon-s-grid"
        type="password"
      ></el-input>
    </el-form-item>
    ...
    
    <style lang="less" scoped>
    ...
    <script>
    export default { 
      data() { 
        return { 
            ...
          // 登录表单验证规则
          loginFormRules: { 
            username: [
              {  required: true, message: "请输入登录名称", trigger: "blur" },
              {  min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
            ],
            password: [
              {  required: true, message: "请输入登录密码", trigger: "blur" },
              {  min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" },
            ],
          },
        };
      },
    };
    </script>
    ...

#### 3.3.8 实现表单的重置功能 ####

*  重置按钮绑定方法重置方法，重置规则和输入内容
 *  `ref="loginFormRef"` 引用表单对象
 *  表单重置方法：`resetFields` (element ui - [Form Methods][] )

<template>
     ...
          
          <el-form
            ref="loginFormRef" 
            :model="loginForm"
            :rules="loginFormRules"
            label-width="0px"
            class="login_form"
          >
           ...
            
            <el-form-item class="btns">
              <el-button type="primary">登录</el-button>
              <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        ...
      },
      methods:{ 
          resetLoginForm(){ 
              this.$refs.loginFormRef.resetFields();
          }
      },
    };
    
    ...

#### 3.3.9 实现登录前表单数据的预校验 ####

<template>
     ...
           
            <el-form-item class="btns">
                <el-button type="primary" @click="login">登录</el-button>
     ...         
    </template>
    
    <script>
    export default { 
      data() { 
        ...
      },
      methods:{ 
      ...
          login(){ 
              this.$refs.loginFormRef.validate(valid =>{ 
                  console.log(valid) // true：校验成功；false：校验失败
              })
          }
      },
    };
    
    ...

#### 3.3.10 配置axios发起请求 ####

*  main.js中挂载axios，并配置url跟路径

// 挂载axios
    import axios from 'axios'
    // 配置根路径
    axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
    Vue.prototype.$http = axios

*  Login.vue中编写登录方法

login() { 
      this.$refs.loginFormRef.validate(async (valid) => { 
        if (!valid) return; // valid:true=校验成功；false=校验失败。
        const {  data: res } = await this.$http.post("login", this.loginForm);
        console.log(res);
        if (res.meta.status !== 200) return console.log("登录失败");
        console.log("登录成功");
      });
    },

#### 3.3.11 创建弹窗提示 ####

*  element.js中全局挂载Message

import {  Message } from 'element-ui'
    
    Vue.prototype.$message = Message

*  Login.vue中加入弹窗

if (res.meta.status !== 200) return this.$message.error("登录失败");
    this.$message.success("登录成功");

#### 3.3.12 获取并存储token ####

// 1、将登录成功后的token，保存到客户端的sessionStorage中
    // 1.1 项目中除了登录以外的接口，都需要登录之后才能访问
    // 1.2 token 只应在当前网站打开期间生效，所以讲token保存在sessionStorage中
    window.sessionStorage.setItem("token", res.data.token);

#### 3.3.13 设置路由跳转 ####

/router/index.js

import Home from '../components/Home.vue'
    
    const routes = [
        ...,
      {  path: '/home', component: Home }
    ]

// 2、设置路由跳转到home页面
    this.$router.push("/home");

#### 3.3.14 设置路由守卫 ####

完成除了登录页面，其他页面都需要token才能登录：  
修改路由文件

import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '../components/Login.vue'
    import Home from '../components/Home.vue'
    
    Vue.use(Router)
    
    
    const router = new Router({ 
      routes: [
        {  path: '/', redirect: '/login' },
        {  path: '/login', component: Login },
        {  path: '/Home', component: Home}
      ]
    })
    
    // 挂载路由导航守卫
    router.beforeEach((to, from, next) => { 
      // to 将要访问的路径
      // from 代表从哪个路径跳转而来
      // next 是一个函数，表示放行
      // next() 放行 next('/login') 强制跳转
      if (to.path === '/login') return next()
      // 获取token
      const tokenstr = window.sessionStorage.getItem('token')
      // 没有token，强制跳转到登录页
      if (!tokenstr) return next('/login')
      next()
    })
    // 暴露路由
    export default router

#### 3.3.15 退出登录 ####

退出功能的实现原理：  
基于token的方式实现退出，只需要销毁本地的token即可。

logout() { 
      window.sessionStorage.clear();
       this.$router.push("/login");
    },

## 问题 ##

使用`<style lang="less">`后报错`Module not found: Error: Can't resolve 'less-loader' in xxx`  
\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a20xTHBM-1625287353547)(evernotecid://B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59/appyinxiangcom/9699651/ENResource/p3287)\]

原因是未安装less和less-loader依赖

npm install less
    npm install less-loader@5.0.0 -D

> 使用最新版本的`less-loader`在vue2项目中会不兼容，因此使用低版本的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70]: /images/20221005/f0eb9f085187426cae9d9995ee45c69e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/c8a9bc12a2dc4a6f8bdc6bdaa153886a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/f11f01af5170426489c54a7e77c2bf01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 3]: /images/20221005/43433f9bfa0c4a118e6b146a017982d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 4]: /images/20221005/fb501cff277444e6972a482eef66bfa8.png
[Link 1]: https://element.eleme.cn/#/zh-CN/component/layout
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 5]: /images/20221005/507aab3ee008432bbe7399d58c987973.png
[Form Methods]: https://element.eleme.cn/#/zh-CN/component/form