Vue登录功能的业务逻辑 - 学习记录

对登录功能的实现步骤理解不是很熟悉，记录一下吧！

主要用到的功能：

• 路由导航守卫
• 编程式路由
• cookie相关操作

场景一

直接访问 "/login" 页面，实现通过输入账号密码进行登录

步骤：

• 给表单设置数据双向绑定这样用户数据可以更新到data里面，一般包括用户名、密码、（验证码）
• 用户点击登录按钮时，除了进行检查必填项是否都填写了这些细节等，携带登录所需数据通过POST请求向登录接口发起请求。
• 登录接口回传数据。
• 一般回传数据中包含一个状态码：比如登陆成功为"1" ，登录失败为 "0" ; cookie信息
• 如果登录成功：将cookie存储到本地浏览器端，并通过编程式路由跳转到一个默认页面比如用户中心
• 如果登陆失败：清空cookie信息，并显示错误信息，(如果后端返回的数据中含有错误信息就显示后端返回的错误信息)，重新获取验证码。

代码实现

<el-form 
:model="dataForm" 
:rules="dataRule" 
ref="dataForm" 
@keyup.enter.native="dataFormSubmit()" 
status-icon>
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()" alt="">
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
            </el-form-item>
          </el-form>

HTML代码也很简单，主要就是实现输入、输入规则匹配、点击登陆后执行某个函数。

然后是点击登录后的逻辑：

      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/sys/login'),
              method: 'post',
              data: this.$http.adornData({
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'captcha': this.dataForm.captcha
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token)
                this.$router.replace({ name: 'home' })
              } else {
                this.getCaptcha()
                this.$message.error(data.msg)
              }
            })
          }
        })
      },

可以看到，点击登录后执行的函数，先携带数据向后端的登录接口发送请求，等到.then 数据返回后进行相关判断：

如果data.code === 0 (这是后端发送的状态码，表示登陆成功了。)：设置本地cookie、路由跳转

如果data.code !== 0(说明登陆失败)：重新获取验证码、显示错误信息。

场景二

有的时候用户并不是去访问登陆页面，而是可能直接去访问用户中心页面，但是这个时候用户还没有登录，所以要跳转到登陆页面去。

所以要实现的逻辑有：

• 怎么知道某个页面是不是一定需要用户登录才能展示、并且如何判断、匹配
• 如何判断当前用户是否登录，是否存有cookie，当前的cookie还是否有效
• 如果没有登录或者cookie无效执行什么操作
• 如果已经登陆或者cookie有效执行什么操作

大致的解决方案

可以通过给相应路由设置meta元信息来实现：

meta:{
    logined:true
}

然后设置路由导航守卫：

如果to属性对应的组件需要登录才能访问（即meta中logined为ture），就判断当前的cookie是否是有效的，如果有效，就通过next() 放行跳转；如果cookie无效 则通过next({name:login})来更改跳转路径。

这一块还在学习，前端安全登录有很多种的方式，这个只是我想到的一种比较简单的想法，有建议的欢迎评论补充。