登录退出功能

一、登录概述

1、登录业务流程

① 在登录页面输入用户名和密码

② 调用后台接口进行验证

③ 通过验证之后，根据后台的响应状态跳转到项目主页

2、登录业务的相关技术点

• http 是无状态的

• 通过 cookie 在客户端记录状态

• 通过 session 在服务器端记录状态

• 通过 token 方式维持状态

• 注意：前端和后台之间不存在跨域使用cookie/session，存在使用token

3、登录 — token 原理分析

• token值由服务器生成，每个用户对应的token值是不一样的

• 服务器根据不同的token返回用户的数据

二、登录页面布局

1、通过 Element-UI 组件实现布局

1.使用到的组件

• el-form

• el-form-item

• el-input

• el-button

• 字体图标

2.如何使用

• 在plugins文件夹下的elements.js文件中导入和注册需要使用的组件

• 在main.js 中导入elements.js文件

• 可以在官方网站查看使用

2、最大容器：.login-container

• 宽高：父元素的100%

• 背景色：#2b4b6b

3、登录框的盒子：.login-box

• 基本样式设置：

width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;

• 放置位置：将盒子放置页面中央

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

4、头像盒子：.avatar-box

• 基本样式设置：

height: 130px;
width: 130px;
border: 1px solid #eee;
box-shadow: 0 0 10px #ddd;
background-color: #fff;

• 把头像盒子设置为圆形：

border-radius: 50%;

• 把盒子和盒子内的图片留一些空隙：

padding: 10px;

• 位置设置：将盒子放置到中上方

position: absolute;
left: 50%;
transform: translate(-50%, -50%);

1.头像盒子内部的图片

• 基本样式设置

width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;

5、登录表单区域

• 这里使用一个el-form组件，在el-form组件里使用了三个el-form-item 组件，其中两个item项里是一个el-input，最后一个item项里是两个el-button 组件

• 位置设置：整个表单往下移

position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
//？？？？
box-sizing: border-box;

• 按钮位置：右下方

display: flex;
justify-content: flex-end;

• 绘制带icon的input输入框：使用属性prefix-icon

三、表单的数据验证

1、表单的数据绑定

• 第一步：在el-form标签中使用 :modle 绑定数据对象

• 第二步：在el-from-item的el-input 中使用v-model绑定数据对象的具体属性

• 注意：数据对象在vue实例里的data中定义

• 隐藏密码输入框的数字：在密码输入框的el-input 中使用 type：password

2、表单的数据验证

• 第一步：在el-form标签中使用 :rules 绑定验证规则对象

• 第二步：在el-from-item指定prop属性等于具体的验证规则数组

• 注意：验证规则对象在data中定义，验证规则对象里定义验证规则数组

//验证规则数组t
username: [
 //required：表示必输入项  message：表示没有输入的提示信息 trigger: "blur"表示鼠标失去焦点时触发验证
 { required: true, message: "请输入登陆名称", trigger: "blur" },
 //min：最短字符  max:最长输入 
 {min: 3,max: 10,message: "长度在 3 到 10 个字符",trigger: "blur",}
]

3、表单的重置功能

• 在官方文档中最底部，提供了表单方法。获取表单的实例对象，调用实例对象的resetFields方法，实现重置功能

• 第一步：在el-form加入ref引用，等于一个合法引用名称（建议以ref结尾）。

• 第二步：给按钮绑定点击事件，触发重置

• 第三步：使用 this.$refs.合法引用名称 获取表单的实例对象

• 第四步：调用resetFields()

4、登录前表单数据验证

• 获取表单的实例对象，调用实例对象的validate方法

 login() {
   this.$refs.loginFormRef.validate(async (vaild) => {
•    if (!vaild) return;
•    const { data: res } = await this.$http.post("login", this.loginForm);
•    console.log(res);
•    if (res.meta.status !== 200) return console.log("登陆失败");
•    console.log('登陆成功')
   });
  },

四、登录功能

1、配置axios发起登录请求

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

2 、配置Message全局弹框组件

• 第一步：在element.js中导入Message消息提示组件，不同的是，这个组件需要进行全局挂载

vue.prototype.$message=Message

• 说明：消息提示组件被挂载到了vue的原型对象上，每个组件都可以通过this来访问$message，访问到$message就可以进行弹框提示

• 第二步：使用Message消息提示组件

//失败的提示
this.$message.error('登录失败')
//成功的提示
this.$message.success('登录成功')

3、将token保存到sessionStorage中

• 项目中除了登录以外的所有API接口，必须在登陆成功之后才能访问

window.sessionStorage.setItem("token", res.data.token);

4、通过编程式导航跳转到后台主页，路由地址是/home

this.$router.push("/home");

5、路由导航守卫控制访问权限

• 需求：如用户没有登录，就直接通过URL访问特定页面，需要导航到登录页面

• 调用beforeEach函数

router.beforeEach((to, from, next) => {
  if (to.path === '/login') { return next() }
  else {
  //获取token，以此来判断是否登录
    const tokenStr = window.sessionStorage.getItem('token')
    if (!tokenStr) return next('/login')
    next()}})

• 说明：

  • to是将要访问的路径

  • from是从哪个路径而来

  • next是一个函数，表示放行【next()表示放行，next("/路径")强制跳转】

五、退出功能

1、退出功能实现原理

• 基于token的方式实现退出，直接销毁本地的token即可。

• 使用window.sessionStorage.clear()来清空token

2、实现退出功能

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