登录

一、登录业务流程

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

二、登录业务的相关技术点

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

通过token原理分析

1、基本结构

<el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules">
    <el-form-item prop="username">
</el-form>
<button @click="login()"></button> 
 
data(){
  return{ 
    loginFormRules:{
      username:[
        {required:true,message:'请输入登录名称'，trigger:'blur'} 
      ]
    }
  }
}
methods:{
    //重置表单
    resetLoginForm(){
        this.$refs.loginFormRef.resetFields();
    }，
    //表单预验证
    * 点击登录的时候，不能直接发起请求，而是需要在发起请求前进行预验证；预验证通过之后，才可以发起请求；
    * validate函数是对整个表单进行预验证
    login(){ //返回Promise，需要async/await
      this.$refs.loginFormRef.validate(async valid=>{
        if(!valid) return; //取反，如果valid为false的话，直接不登录
        //{data:res} 直接解构赋值，解构data，并重新命名为一个res对象
        //async/await，因为请求返回的是一个Promise，所以直接异步请求用到await
        const {data:res} = await this.$http.post('login',this.loginForm);
        if(res.meta.status !== 200) return this.$Message.error('登录失败')；
        this.$message.success('登录成功')
    })
}
复制代码

2、将token存储到sessionStorage

将登录成功之后的token，保存到客户端的sessionStorage中，项目中出了登录之外的其他API接口，必须在登录之后才能访问。token只应当前网站打开期间生效，所以将token保存在sessionStorage中

window.sessionStorage.setItem(’token’,res.data.token)

//通过编程式导航跳转到主页，地址是/home
this.$router.push(‘/home')
复制代码

3、路由导航守卫控制页面访问权限

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

//为路由对象，添加beforeEach导航守卫
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()
})
复制代码

4、退出

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

methods:{
    logout(){
        window.sessionStorage.clear();
        this.$router.push('/login')
    }
}
复制代码