Vue实战之 3. 登录/退出功能
1. 登录概述
1. 登录业务流程
- 在登录页面输入用户名和密码
- 调用后台接口进行验证
- 通过验证之后，根据后台的响应状态跳转到项目主页
2. 登录业务的相关技术点
- http是无状态的
- 通过 cookie 在客户端记录状态
- 通过session 在服务器端记录状态
- 通过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. 实现登录以及重置
- 通过axios 调用登录验证接口
- 登录成功之后保持用户的 token 信息
- 跳转到项目主页
methods: {
// 点击重置按钮，重置登录表单
resetLoginForm () {
// console.log(this);
this.$refs.loginFormRef.resetFields()
},
// 表单的预验证
login () {
this.$refs.loginFormRef.validate(async (valid) => {
// console.log(valid)
if (!valid) return
const { 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. 通过编程式导航跳转到后台主页，路由地址是 /home
this.$router.push('/home')
})
}
}
关于localStorage 和 sessionStorage的区别如下：
localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。
3. 路由导航守卫控制访问权限
如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。
router.beforeEach((to, from, next) => {
// 如果访问的是登录页面
if (to.path === '/login') return next()
// 如果访问的不是登录页面，则要先检查是否有token
const tokenStr = window.sessionStorage.getItem('token')
// 如果没有token
if (!tokenStr) return next('/login')
// 如果有token
next()
})
4. 退出功能实现原理
基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的情趣就不会携带token，必须重新登录生成一个新的token之后才能访问页面
methods: {
logout () {
// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router.push('/login')
}
}
4. 提交登录功能代码
当写完登录功能代码时，查看一下当前项目中的源代码状态：
输入 gitt add . 之后再运行 git commit -m ：
查看分支：
将login分支中的代码合并到master主分支中：
把本地的master分支推送到云端的码云中：
刷新gitee页面：
那如果希望把本地的login分支推送到云端进行保存该怎么办？（云端只有一个master默认分支）
刷新gitee页面，出现了login子分支：
