保存登录信息到vuex、保持登录状态、退出登录、一些表单验证

忘是亡心i 2021-07-24 13:43 841阅读 0赞

保存登录信息：
    在表单验证成功后,因为此时用户基本数据已经可以直接前端获得,利用vuex,可以在action.js中调用同步方法去调用mutatins.js中的方法去保存数据到state中
    
    自动登录:
    第一次登录成功后,后台设置具有时间的session,记录用户已登录且能确定用户的标识存进session,下次打开应用时利用vuex状态管理后,
    在App.vue生命周期中先发送请求到后台,后台先读取session是否存在,若存在根据标识去数据库读取用户数据,实现自动登录。
    
    退出登录:
    vuex异步方法发送请求给后台清除session,然后调用mutations.js中的方法,清除保留的用户数据

代码示例:  
登录界面:

<template>
      <div class='login'>
        <p @click='$router.back()'><</p>
    
        <div class='md'>
          <p>Jeff外卖</p>
          <div class='linfo'>
            <span :class='{on:flag}' @click="change">短信登录</span>
            <span :class='{on:!flag}' @click="change">密码登录</span>
            <div class='mlog'>
    
              <div v-show='flag'>
                <div class='mp'>
                  <span>手机号</span>
                  <input type="text" placeholder="" v-model="phone">
                  <span :class='{rphone:right_phone}' @click='getNum'>{ { time?'剩下'+time+'秒':'获取验证码'}}</span>
                </div>
                <div class='mp2'>
                  <span>验证码</span>
                  <input type="text" v-model='pro'>
                </div>
              </div>
    
              <div v-show='!flag'>
                <div class='mp'>
                  <span>用户名</span>
                  <input type="text" placeholder="" v-model='user'>
                </div>
                <div class='mp2'>
                  <span>密码</span>
                  <input :type="type" v-model="pwd">
                  <van-switch  @input="onInput" class='bt'  size="18px" v-model="checked" active-color="#07c160" inactive-color="#F0F2F4" />
                </div>
                <div class='mp4'>
                  <span>验证码</span>
                  <input type="text" v-model='pro2'>
                  <img src="./imgs/captcha.svg" alt="">
                </div>
              </div>
    
              <div class='mp3'>
                <p class='ts'>
                  温馨提示:未注册Jeff外卖账号的手机号,登陆时将自动注册,且代表已同意<span style='color:#8FBCB3'><<用户服务协议>></span>
                </p>
                <button class='mbtn' @click="login">登录</button>
                <span class='ts2'>关于我们</span>
              </div>
    
    
            </div>
          </div>
        </div>
    
        <Tip :tip='warn' v-show='tipFlag' @close='closeTip'></Tip>
    
      </div>
    
    </template>
    
    <script>
      import Vue from 'vue';
      import {  Switch } from 'vant';
      import Tip from '../../components/AlterTip/Tip.vue';
      import axios from 'axios';
      import qs from 'qs';
    
      Vue.use(Switch);
    
      export default{ 
        data()
        { 
          return{ 
              flag:true,
              checked:false,
              type:'password',
              phone:'',
              time:0,
              timeFlag:true,
              user:'',
              pwd:'',
              pro:'',
              pro2:'',
              warn:'',
              tipFlag:false,
              isLogin:false
          }
        },
        components:{ 
          Tip
        },
        methods:{ 
          change()
          { 
            this.flag=!this.flag;
          },
          onInput(checked)
          { 
            if(checked)
            { 
              this.type='text';
            }else{ 
              this.type='password';
            }
          },
          getNum()
          { 
            // if(flag==)
            if(this.right_phone)
            { 
              if(this.timeFlag)
              { 
                this.timeFlag=false;
                this.time=60;
    
                axios.get("/local_api/sendCode").then((res)=>{ 
                  console.log(res.data);
                })
    
                let timer=setInterval(()=>{ 
    
                  this.time--;
                  if(this.time==0)
                  { 
                    this.timeFlag=true;
                    clearInterval(timer);
                  }
                },1000)
              }
    
            }else{ 
              alert('请输入正确手机号');
            }
          },
          closeTip()
          { 
            this.tipFlag=false;
          },
          login()
          { 
    
              if(this.flag) //短信登录
              { 
                const{ phone,pro,right_phone}=this;
    
                if(!this.right_phone)
                { 
                  //手机号格式必须正确
                  this.warn='手机号格式不正确';
                  this.tipFlag=true;
    
                }else if(!/^\d{6}$/.test(pro)){ 
                  //验证码必须是6位数字
                  this.warn='验证码必须是6位数字';
                  this.tipFlag=true;
    
                }else{  //验证码登录
                  axios.get('/local_api/sendPass?code='+pro+'&phone='+phone).then((res)=>{ 
                    console.log(res.data);
                    if(res.data=='验证成功')
                    { 
                        this.isLogin=true;
    
                        //将用户信息保存到vuex
                        this.$store.dispatch('getUserInfo',{ phone,id:1,isLogin:this.isLogin});
    
                         //回退到个人页
                        this.$router.replace('/person');
    
                    }else{  //失败情况,弹出提示框
    
                      this.warn='手机号或验证码错误';
                      this.tipFlag=true;
                    }
    
                  })
                }
    
    
              }else{ 
                const{ user,pwd,pro2}=this;
                if(!this.user)
                { 
                  //用户名不为空
                  this.warn='用户名不为空';
                  this.tipFlag=true;
                }else if(!pwd){ 
                  //密码不为空
                  this.warn='密码不为空';
                  this.tipFlag=true;
                }else if(!pro2)
                { 
                  //验证码不为空
                  this.warn='验证码不为空';
                  this.tipFlag=true;
    
                }else{  //密码登录
    
                  axios.post('/local_api/sendPass',qs.stringify({ 
                    user:user,
                    pwd:pwd
                  })).then(res=>{ 
                    console.log(res.data);
    
                    if(res.data=='登录成功')
                    { 
                        this.isLogin=true;
    
                        //将用户信息保存到vuex
                        this.$store.dispatch('getUserInfo',{ user:user,pwd:pwd,id:2,isLogin:this.isLogin});
    
                        //回退到个人页
                        this.$router.replace('/person');
                    }else{  //失败情况,弹出提示框
                      this.warn='用户名或密码错误'
                      this.tipFlag=true;
                    }
    
                  })
    
                }
    
              }
          }
        },
        computed:{ 
          right_phone()
          { 
            return /^1\d{ 10}$/.test(this.phone)
          }
        }
    
      }
    </script>
    
    <style lang='less'>
    
    .login>p{ 
      font-size: 30px;
      padding-left: 10px;
      color:#ccc;
      height: 80px;
    }
    .on{ 
      border-bottom: solid 3px #68BFB0;
      color: #68BFB0;
    }
    .login>.md{ 
      width: 80%;
      margin: 0 auto;
      text-align: center;
      >p{ 
        font-size: 40px;
        color: #009474;
        margin-bottom: 20px;
      }
      .linfo{ 
        >span{ 
          padding: 0 10px;
        }
        .mlog{ 
          margin-top: 20px;
          text-align: start;
          .mp{ 
            width: 100%;
            height: 40px;
            line-height: 40px;
            white-space: nowrap;
            margin-bottom: 20px;
            >span:last-child{ 
              color:#ccc;
              margin-left: -40px;
    
            }
            border: solid 1px #ccc;
            >input{ 
              border: none;
            }
            .rphone{ 
              color:black !important;
    
            }
          }
          .mp2{ 
            width: 100%;
            height: 40px;
            line-height: 40px;
            white-space: nowrap;
             border: solid 1px #ccc;
             position: relative;
    
            >span{ 
    
            }
            >input{ 
              border: none;
            }
            .bt{ 
              top:50%;
              transform: translateY(-9px);
              right:10px;
              position: absolute;
            }
          }
          .mp4{ 
            margin-top: 20px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            white-space: nowrap;
             border: solid 1px #ccc;
             position: relative;
    
            >span{ 
    
            }
            >input{ 
              border: none;
            }
            >img{ 
              position: absolute;
              right: 0px;
              top:0;
              bottom: 10px;
              margin-top: -5px;
              margin-right: -15px;
            }
    
          }
          .mp3{ 
            text-align: center;
            .ts{ 
              margin-top: 10px;
              font-size: 14px;
              text-align: start;
              color: #ccc;
            }
            .mbtn{ 
              width: 100%;
              background-color: #42C56C;
              border: none;
              color: white;
              font-size: 20px;
              margin-top: 20px;
              letter-spacing: 5px;
              border-radius: 2px;
              margin-bottom: 20px;
    
            }
            .ts2{ 
              color: #ccc;
              font-size: 14px;
            }
          }
    
        }
      }
    
    }
    </style>

登录成功后返回的用户界面:

<template>
      <div class='person'>
        <div class='pheader'>
          <p>我的</p>
          <div class='top'>
            <div class='ava'>
               <img src="../../../static/person/1.png" alt="">
            </div>
    
            <div class='topinfo'>
              <div>
                <p  @click='go'>{ { userInfo.id? userInfo.id==1?userInfo.phone:userInfo.user:'登录 / 注册'}}</p>
                <div class='tinfo1'>
                  <img src="../../../static/person/2.png" alt="">
                  <span>{ { userInfo.phone?userInfo.phone:'暂无绑定手机号'}}</span>
                </div>
              </div>
              <span class='arow'>></span>
            </div>
          </div>
        </div>
    
        <div class='zh'>
          <div>
            <p><span class='sp1'>0.00</span>元</p>
            <p>我的余额</p>
          </div>
          <div>
            <p><span class='sp2'>0</span>元</p>
            <p>我的优惠</p>
          </div>
          <div>
            <p><span class='sp3'>0</span>元</p>
            <p>我的积分</p>
          </div>
    
        </div>
    
        <div class='card1'>
          <div>
            <div class='cimg'>
              <img src="../../../static/person/3.png" alt="">
            </div>
            <div class='cinfo'>
              <span>我的订单</span>
              <span>></span>
            </div>
          </div>
    
          <div>
            <div class='cimg'>
              <img src="../../../static/person/4.png" alt="">
            </div>
            <div class='cinfo'>
              <span>积分商城</span>
              <span>></span>
            </div>
          </div>
    
          <div>
            <div class='cimg'>
              <img src="../../../static/person/5.png" alt="">
            </div>
            <div class='cinfo'>
              <span>jeff外卖会员卡</span>
              <span>></span>
            </div>
          </div>
    
          <div>
            <div class='cimg'>
              <img src="../../../static/person/6.png" alt="">
            </div>
            <div class='cinfo'>
              <span>服务中心</span>
              <span>></span>
            </div>
          </div>
        </div>
    
        <div class='out' v-show='userInfo.id'>
          <button @click='clear'>退出登录</button>
        </div>
    
        <Tip :tip="'确定退出吗?/(ㄒoㄒ)/'" v-show='sure' @close='close'></Tip>
    
      </div>
    </template>
    
    <script>
      import { mapState} from 'vuex';
      import Tip from '../../components/AlterTip/Tip.vue';
      export default{ 
        data()
        { 
          return{ 
            sure:false
          }
        },
        methods:{ 
          go()
          { 
            if(this.userInfo.isLogin)
            { 
              console.log('去到个人中心');
            }else{ 
               this.$router.push("/login");
            }
    
          },
          clear()
          { 
            this.sure=true;
          },
          close()
          { 
            this.sure=false;
            this.$store.dispatch('getLoginOut');
    
          }
    
        },
        computed:{ 
          ...mapState(['userInfo'])
        },
        components:{ 
          Tip
        }
    
      }
    </script>
    
    <style lang='less'>
      .person{ 
        height:620px;
        background-color: #eee;
      }
      .pheader{ 
        background-color: #42AF08;
        >p{ 
          line-height: 40px;
          text-align: center;
          border-bottom: solid 1px white;
          color: white;
        }
        .top{ 
          display: flex;
          padding: 20px 0;
          .ava{ 
            flex:1;
            text-align: center;
            img{ 
              width: 50px;
              height: 50px;
            }
          }
          .topinfo{ 
            flex:4;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .tinfo1{ 
              display: flex;
              justify-content: flex-start;
              margin-top: 5px;
              img{ 
                width: 15px;
                height: 20px;
              }
            }
            span{ 
              padding-right: 10px;
            }
          }
        }
      }
    
      .zh{ 
        background-color: white;
        display: flex;
        border-bottom: solid 10px #eee;
        padding: 10px 0;
        >div{ 
          flex:1;
          text-align: center;
          >p{ 
            font-size: 12px;
    
          }
          .sp1{ 
            font-size: 30px;
            font-weight: bolder;
            color: orange;
          }
          .sp2{ 
            font-size: 30px;
            font-weight: bolder;
            color: red;
          }
          .sp3{ 
            font-size: 30px;
            font-weight: bolder;
            color: #83B741;
          }
    
    
        }
        >div:nth-child(even){ 
          border-left: solid 1px #eee;
          border-right: solid 1px #eee;
        }
      }
    
      .card1{ 
        background-color: white;
        >div{ 
          display: flex;
          height: 40px;
          border: solid 1px #eee;
          .cimg{ 
            text-align: center;
            display: flex;
            align-items: center;
            >img{ 
              width: 20px;
              height: 20px;
            }
          }
          .cinfo{ 
            padding:0 10px;
            line-height: 40px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >span:nth-child(2)
            { 
              font-weight: bold;
              color:#E6E6E6;
            }
          }
        }
        >div:last-child{ 
          border-top: solid 10px #eee;
        }
      }
      .out>button{ 
        position:fixed;
        background-color: crimson;
        font-weight: bold;
        letter-spacing: 5px;
        color:white;
        width: 100%;
        border: none;
        padding: 10px 0;
        bottom: 50px;
    
      }
    
    
    </style>

App.vue

<template>
      <div id="app">
          <router-view></router-view>
    
          <FootGuide v-show='$route.meta.show'></FootGuide>
      </div>
    </template>
    
    <script>
      import FootGuide from './components/FootGuide/footguide.vue'
      import { mapGetters} from 'vuex'
      import { mapActions} from 'vuex'
    export default { 
      name: 'App',
      data()
      { 
        return{ 
    
        }
      },
      components:{ 
        FootGuide
      },
      mounted()
      { 
        this.$store.dispatch('getAddress',"/local_api/address");
        this.$store.dispatch('getCategorys',"/local_api/categorys");
        this.$store.dispatch('getShops',"/local_api/shops");
    
        this.getAutoInfo();
    
      },
      methods:{ 
        ...mapActions(['getAutoInfo'])
      },
      computed:{ 
        ...mapGetters(['get'])
      }
    }
    </script>
    
    <style>
    *{ 
      margin: 0;
      padding: 0;
    }
    html{ 
      height: 100%;
    }
    body{ 
      height: 100%;
      /* position: relative; */
    }
    #app { 
    
    }
    
    
    </style>

后台:

vuex-index.js:

import Vue from 'vue'
    import Vuex from 'vuex'
    
    import state from './state.js'
    import actions from './actions.js'
    import mutations from './mutations.js'
    import getters from './getters.js'
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({ 
      state,
      mutations,
      actions,
      getters
    })

vuex-state.js:

export default{ 
      address:"", //地址
      categorys:[],//食品分类
      shops:[],//商家
      userInfo:{ } //用户信息
    }

vuex-mutation-type.js:

export const RECEIVE_ADDRESS='receive_address' //地址
    export const RECEIVE_CATEGORYS='receive_categorys' //分类
    export const RECEIVE_SHOPS='receive_shops' //商家
    export const RECEIVE_USERINFO='receive_userinfo' //接收用户信息
    export const RECEIVE_RESET='receive_reset' //重置用户信息

vuex-mutations.js:

import { 
      RECEIVE_ADDRESS,
      RECEIVE_CATEGORYS,
      RECEIVE_SHOPS,
      RECEIVE_USERINFO,
      RECEIVE_RESET
    } from './mutation-types'
    
    export default{ 
      [RECEIVE_ADDRESS](state,{ address}){ 
        state.address=address;
      },
      [RECEIVE_CATEGORYS](state,{ categorys}){ 
        state.categorys=categorys;
      },
      [RECEIVE_SHOPS](state,{ shops}){ 
        state.shops=shops;
      },
      [RECEIVE_USERINFO](state,{ userInfo}){ 
        state.userInfo=userInfo;
      },
      [RECEIVE_RESET](state)
      { 
        state.userInfo={ };
      }
    
    }

vuex-actions.js:

import { 
      RECEIVE_ADDRESS,
      RECEIVE_CATEGORYS,
      RECEIVE_SHOPS,
      RECEIVE_USERINFO,
      RECEIVE_RESET
    } from './mutation-types'
    
    import axios from 'axios';
    
    export default{ 
      //异步获取地址
      getAddress({ commit,state},url){ 
    
            axios.get(url).then((res)=>{ 
              let address=res.data;
              commit(RECEIVE_ADDRESS,{ address});
            })
        }
      ,
      //异步获取食品分类
      getCategorys({ commit,state},url){ 
    
            axios.get(url).then((res)=>{ 
              let categorys=res.data;
              commit(RECEIVE_CATEGORYS,{ categorys});
            })
    
      },
      //异步获取商家列表
      getShops({ commit,state},url){ 
    
            axios.get(url).then((res)=>{ 
              let shops=res.data;
              commit(RECEIVE_SHOPS,{ shops});
            })
    
      },
    
      //同步记录用户信息,因为用户信息已有,当验证成功时
      getUserInfo({ commit,state},userInfo){ 
    
            commit(RECEIVE_USERINFO,{ userInfo});
    
      },
    
      //异步读取用户信息,用于自动登录
      getAutoInfo({ commit,state})
      { 
         let userInfo={ };
    
         axios.get('/local_api/loginState').then((res)=>{ 
           userInfo=res.data;
           commit(RECEIVE_USERINFO,{ userInfo});
         })
      },
    
      //异步请求退出登录
      getLoginOut({ commit,state})
      { 
    
        axios.get('/local_api/loginOut').then((res)=>{ 
          console.log(res.data);
          commit(RECEIVE_RESET);
        })
      }
    
    }