3.登录/退出功能

登录概述

1.登录业务流程
①在登录页面输入用户名和密码
②调用后台接口进行验证
③通过验证之后，根据后台的响应状态跳转到项目页
2.登录业务的相关技术点

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

说明：现在做的这个vue项目运行在一个新的端口号，服务器可能与前端vue项目之间存在跨域问题，
如果前端和后台接口之间不存在跨域问题，那么推荐大家使用cookie和session来记录登录状态，
反之，如果前端与服务器之间存在跨域问题，那么需要使用token的方式来维持登录状态。

登录——token原理分析

登录功能实现

1.登录页面的布局
通过Element-UI组件实现布局

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

创建一个子分支

git checkout -b 分支的名字
例：git checkout -b login

查看当前项目中的所有分支

git branch

登录功能实现

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

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

//为路由对象，添加beforeEach导航守卫
//to代表将要访问的页面路径，from代表从哪个页面路径跳转而来的，next代表一个放行的函数
router.beforeEach((to,from,next)=>{
    //如果用户访问的登录页，直接放行
    if(to.path==='/login') return next()
    //从sessionStorage中获取到保存的token值
    const tokenStr=window.sessionStorage.getItem('token')
    //没有token，强制跳转到登录页
    if(!tokenStr) return next('/login')
    next()
})

退出

退出功能实现原理

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

//清空token
window.sessionStorage.clear()
//跳转到登录页
this.$router.push('/login')