一、登录概述

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

二、原理分析

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

三、实现登录

• 在实现登录前，先查看工作环境是否干净，如果不干净则需要git add .和git commit -m 'xxx'，并且需要创建登录分支，实现登录的工作都在login分支上做。最后将不需要的文件内容删除掉，运行项目后是一个干净的，什么也没有的项目。

1.component下新建Login.vue，添加样式

2.数据绑定

3.表单验证

4.表单重置（重置验证报错）

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

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

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

5.登录前的预校验

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

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

• valid是验证结果，是一个布尔值

6.配置axios发起登录请求

• 1.如果此时login函数中打印出来的valid是true则去main.js中配置axios （valid的值：true或false，如果表单验证成功，即符合规则，valid为true，反之为false）

• 2.发送请求

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

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

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

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

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

• 1. 将登录成功之后的token, 保存到客户端的sessionStorage 中，为什么不是保存到localStorage中呢？sessionStorage是当前会话有效，localStorage是保存到内存中，永远有效
  • 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
  • 1.2 token只应在当前网站打开期间生效，所以将token 保存在sessionStorage 中 登录成功后的res中存在token值，可以在application中的Session Storage中找到token值
• 2. 通过编程式导航跳转到后台主页，路由地址是/home

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

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

四、退出登录

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

五、将代码提交到远程仓库

1.先查看状态

2.git add . git commit -m '完成登录功能'

3.切换到主分支，并将login分支合并到主分支

4.提交主分支，再切换回login分支，将login分支也提交到远程仓库