一、登录概述

• 关于cookie、session和token，当存在跨域问题时，使用token方式，当不存在跨域问题时使用cookie和session

二、原理分析

• 1.客户端在登录页面输入用户名和密码进行登录
• 2.服务器验证通过（验证是否存在该用户）之后生成该用户的token并返回到客户端
• 3.此时，客户端存储该token
• 4.并且在后续的所有请求中都携带该token向服务器发送请求
• 5.服务器再验证token是否存在，若存在则可进行下一步，若不存在则返回登录页面

三、实现登录

1.表单重置

• 1.给el-form添加ref属性

• 2.给重置按钮添加点击事件

• 3.点击重置按钮后触发resetFields()函数

2.登录前的预校验

• 1.给登录按钮添加点击事件

• 2.点击后获取表单的引用

3.配置axios发起登录请求

• 1.如果此时login函数中打印出来的valid是true则去main.js中配置axios

（valid的值：true或false，如果表单验证成功，即符合规则，valid为true，反之为false）

• 2.发送请求

• 如果方法的返回值result是Promise对象，则用async、await简化操作，获得具体数据（响应对象），其中data是真实数据，是我们所需要的

4.弹框提示（element-ui中的Message消息提示）

• 1.在plugins中的element.js导入弹框提示组件（挂载到vue的原型中，则每个组件都能通过this.$message使用）

• 2.使用弹框提示中的方法：success、error等

5.完善登录后的操作（token）

• 1. 将登录成功之后的token, 保存到客户端的sessionStorage 中，为什么不是保存到localStorage中呢？sessionStorage是当前会话有效，localStorage是保存到内存中，永远有效
  • 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
  • 1.2 token只应在当前网站打开期间生效，所以将token 保存在sessionStorage 中

登录成功后的res中存在token值，可以在application中的Session Storage中找到token值

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

6.路由导航守卫控制访问权限

在路由暴露之前，挂载路由导航守卫

四、退出登录

• 1. 给退出登录按钮添加点击事件
• 2. 清空token，并跳转到登录页面