Vue实战--电商后台管理系统|Vue实战之 3. 登录/退出功能 vue.js|javascript|前端

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之后才能访问页面