Vue實現登錄以及登出詳解

Posted on by

首先先瞭解一下，我們的效果實現流程

首先登錄概述及業務流程和相關技術點

  • 錄頁面的佈局
  • 創建兩個Vue.js文件
  • 一個我們來做登錄頁和註冊頁
  • 登錄頁面的佈局
  • 配置路由
  • 登錄表單的數據綁定
  • 登錄表單的驗證規則
  • 登錄表單的重置
  • 登錄預驗證
  • 登錄組件配置彈窗提示
  • 登錄成功後的行為
  • 將登錄之後的token，保存到客戶端的sessionStorage中
  • 通過編程式導航跳轉到後臺主頁，路由地址是默認路徑 ‘/’
  • 在我們首頁的登出，組件配置彈窗提示，把我們的token使用removeItem刪除

登錄業務流程

1.在登錄頁面輸入用戶名和密碼

2.調用後臺接口進行驗證

3.通過驗證之後，根據後臺得響應狀態跳轉到項目主頁

登錄功能實現

1.首先我們用路由守衛來驗證登錄，判斷是否與需要登錄

{
    path:'/login',
    name:"login",
    component:login,
    meta:{
      login:true
    }
} 
  // 需要登錄的地方定義meta-true  看他需不需要登錄
   if(to.matched.some(item=>item.meta.login)){//需要登錄
    console.log("需要登錄");
    if(isLogin){//1.已經登錄，直接通過
        if(data.error===400){//後端告訴你，登錄不成功
            next({name:'login'})
            localStorage.removeItem('token');
            return;
        }
        if(to.name==='login'){
            next({name:'Home'})
        }else{
            next()
        }
        return;
    }
    if(!isLogin && to.name==='login'){//2.未登錄，但要去登錄頁
        next()
    }
    if(!isLogin && to.name !=='login'){//3.未登錄，去的也不是登錄頁
        next({name:"login"})
    }
   }else{//不需要登錄直接進
       next()
   }

2.表單的驗證規則，我們用的是Element的組件庫

在模板中用Element編寫我們的樣式佈局

 <div class="login-section">
    <!-- :rules="rules" -->
    <el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :rules="rules"
      :model="rulesFrom"
      status-icon
      ref="ruleFrom"
    >
      <el-form-item label="用戶名" prop="name">
        <!--             使用v-model來獲取用戶輸入的名字                    -->
        <el-input type="text" v-model="rulesFrom.name"></el-input>
      </el-form-item>
      <el-form-item label="密碼" prop="password"></el-form-item>
        <!--             使用v-model來獲取用戶輸入的密碼                    -->
        <el-input type="password" v-model="rulesFrom.password"></el-input>
      </el-form-item>
      <el-form-item>
        <!--                    定義提交事件             -->
        <el-button type="primary" @click="submitFrom('ruleFrom')">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>

定義表單的驗證規則

詳細的看Element官網from表單

在Data裡面定義

rulesFrom:{
        name:'',
        password:''
      },
      rules:{
        name:[
          // 驗證規則
          {required:true,message:'請輸入用戶名',trigger:'blur'},
          {min:1,max:5,message:'長度在1到5個字符',trigger:'blur'}
        ],
        password:[
          {required:true,message:'請輸入密碼',trigger:'blur'},
          {min:1,max:5,message:'長度在1到5個字符',trigger:'blur'}
        ]
      }

在methods定義提交事件

 // 當我們點擊提交的時候能出發方法能拿到表單的所有東西
    submitFrom(formName){
      this.$refs[formName].validate( (valid)=>{
        if(valid){
          // 如果校檢通過，再裡向後端返送用戶信息和密碼
          login({
            name:this.rulesFrom.name,
            password:this.rulesFrom.password,
          }).then((data)=>{
            console.log(data);
            if(data.code===0){
              localStorage.setItem('token',data.data.token)
              window.location.href='/';
            }
            if(data.code===1){
              this.$message.error(data.mes)
            }
          })
        }else{
          console.log('error submit!!');
          return false
        }
      })
    }

這個時候把登出也寫一下在router beforeEach中給他轉換

const token=localStorage.getItem('token');
//    ！！token轉換成佈爾類型
   const isLogin=!!token;
//    進入路由的時候，需要向後端返送token，驗證是否合法
    const data=await userInfo();
    Store.commit('chageUserInfo',data.data)

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

推薦閱讀：