vue登录与验证功能

463 阅读1分钟
1.登录

1.1思路

  • 点击登录按钮 进行参数的验证 验证手机号和验证码是否登录
  • 使用try catch 将用户信息保存到vuex this.$store.commit('setuser',res)
  • 跳转到home页面 跳转之前判断是login还是nologin
  • 是login正常跳转到home 不是login就 this.$route.back()
  • 再创建一个nologin的路由 页面还是登录页面
  • 在untils创建一个loginplugs.js文件
  • 在main.js导入 并vue.user(插件名)
  • 代码index.vue
try{
1.开启loding效果
    this.loading = true
2.发送网络请求 将数据保存到vuex中
let res = await userLogin(this.$http,{
    url:url,
    method:method,
    data:data
})
// 将数据保存到vuex中
this.$store.commit('setUser',res)
// 关闭loding
this.loading = false
// 判断路由是否是login
if(this.$route.path==='login'){
    // 跳转到home页面
    this.$router.push('/home')
}else{
    // 不是login 返回登录页面
    this.$route.back()
}
}catch(err){
           console.log(err)
        // 开启定时器
        setTimeout(() => {
          // 打印登录失败消息
          this.$toast.fail('手机号或验证码错误')
          // 取消loading
          this.loadingTag = false
        }, 500)
}

  • vuex
/* eslint-disable space-before-function-paren */
import Vue from 'vue'
import Vuex from 'vuex'
// 按需导入封装的local数据
import {
  setUserLocal,
  getUserLocal
} from '@/untils/userLocal'
Vue.use(Vuex)

export default new Vuex.Store({
  // 统一管理数据state
  state: {
    // 取出本地数据
    user: getUserLocal()
  },
  // 修改state的数据
  mutations: {
    setUser(state, obj) {
      // 将state.user赋值给obj
      state.user = obj
      // 存回本地数据中去
      setUserLocal(obj)
    }
  }
})
  • untils文件下的loginPlugs.js
// 进行登录验证

import Vue from 'vue'
// 导入了 router
import router from '@/router'
// 导入了 vuex
import store from '@/store'
// 导入 vant
import {
  Toast
} from 'vant'
Vue.use(Toast)

// 添加一个插件对象
var loginPlugs = {}
// 添加一个 install 方法
loginPlugs.install = function (Vue) {
  Vue.prototype.$login = function () {
    // 得到用户的信息
    let user = store.state.user
    // 判断用户是否登录
    if (!user) {
      Toast.fail('对不起,您还没有登录,请先登录')
      setTimeout(() => {
        router.push('/login/nologin')
      }, 2000)
      return false
    }
    return true
  }
}

// 导入插件对象
export default loginPlugs
  • main.js导入封装的插件
// 导入自己封装的插件
import loginplug from '@/untils/loginplugs'
Vue.use(loginplug)
2.发送验证码 倒计时

2.1思路

  • 判断手机号是否输入或者是否正确 若没有输入则让用户输入手机号码
  • 点击发送验证码按钮 开始倒计时(开启定时器)
  • 当倒计时到0的时候 定时器设置回null 时间重置 显示会发送验证码字样 +代码
getCode(){
    if(this.mobile.user.trim().length<11){
        this.$toast.fail('请输入正确的手机号码')
    }else{
        this.timer = setInteval(()=>{
            // 倒计时每秒--
            this.codeTime--
            // 判断倒计时是否为0
            if(this.codeTime<=0){
                // 重置定时器
                clearUnteval(this.timer)
                // 定时器置null
                this.timer = null
                // 时间重置
                this.codeTime = 10
            }
        },1000)
    }
}

// 页面中显示
// timer 默认是null
{{timer?codeTime+'秒后获取':'获取验证码'}}
```---
# 主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro
# 贡献主题:https://github.com/xitu/juejin-markdown-themes
theme: juejin
highlight:
---