1. 登录概述

1. 登录业务流程

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

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

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

如果前端与服务器之间存在跨域问题，则需要使用token方式来维持登录状态。反之，则用cookie和session。

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

2. 登录 — token原理分析

3. 登录+退出功能的具体实现

1. 登录页面的布局

通过 Element——UI 组件实现布局

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

具体步骤

1.先创建分支（在开发中，如果要开发新功能，尽量把新功能放到一个新的分支上进行开发，分支开发完成以后，再合并到master主分支上）

2. 通过gui 来查看项目的运行效果

3.创建登录组件

4.基于Element-UI进行表单验证

 loginFormRules: {// 验证用户名是否合法username: [{ required: true, message: '请输入登录名称', trigger: 'blur' },{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],// 验证密码是否合法password: [{ required: true, message: '请输入登录密码', trigger: 'blur' },{ min: 6, max: 10, message: '长度在 6 到 15 个字符', trigger: 'blur' }]}

2. 实现登录以及重置

1. 通过axios 调用登录验证接口
2. 登录成功之后保持用户的 token 信息
3. 跳转到项目主页

 methods: {// 点击重置按钮，重置登录表单resetLoginForm () {// console.log(this);this.$refs.loginFormRef.resetFields()},// 表单的预验证login () {this.$refs.loginFormRef.validate(async (valid) => {// console.log(valid)if (!valid) returnconst { data: res } = await this.$http.post('login', this.loginForm)console.log(res)if (res.meta.status !== 200) return this.$message.error('登录失败')this.$message.success('登录成功!')// 1. 将登陆成功之后的 token，保存到客户端的 sessionStorage中//  1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问//  1.2 token 只应在当前网站打开期间生效，所以将 token 保存到 sessionStorage中//  1.3 localStorage 是持久化的存储机制，sessionStorage是会话期间的存储机制window.sessionStorage.setItem('token', res.data.token)// 2. 通过编程式导航跳转到后台主页，路由地址是 /homethis.$router.push('/home')})}}

关于localStorage 和 sessionStorage的区别如下：

localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。

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

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

router.beforeEach((to, from, next) => {// 如果访问的是登录页面if (to.path === '/login') return next()// 如果访问的不是登录页面，则要先检查是否有tokenconst tokenStr = window.sessionStorage.getItem('token')// 如果没有tokenif (!tokenStr) return next('/login')// 如果有tokennext()
})

4. 退出功能实现原理

基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的情趣就不会携带token，必须重新登录生成一个新的token之后才能访问页面

methods: {logout () {// 清空tokenwindow.sessionStorage.clear()// 跳转到登录页this.$router.push('/login')}}

4. 提交登录功能代码

当写完登录功能代码时，查看一下当前项目中的源代码状态：

输入 gitt add . 之后再运行 git commit -m ：

查看分支：

将login分支中的代码合并到master主分支中：

把本地的master分支推送到云端的码云中：

刷新gitee页面：

那如果希望把本地的login分支推送到云端进行保存该怎么办？（云端只有一个master默认分支）

刷新gitee页面，出现了login子分支：