目錄

• 登入業務流程
• 登入功能實現
• 總結

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

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

• 錄頁面的佈局
• 建立兩個.檔案
  
• 一個我們來做登入頁和註冊頁
  
• 登入頁面的佈局
  
• 配置路由
  
• 登入表單的資料繫結
  
• 登入表單的驗證規則
  
• 登入表單的重置
  
• 登入預驗證
  
• 登入元件配置彈窗提示
  
• 登入成功後的行為
  
• 將登入之後的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 lEASsW
 
abel="使用者名稱" 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>

定義表單的驗證規則

詳細的看ElemeEASsWnt官網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'}
        ]
      }

在methods定義提交事件

 // 當我們點選提交的時候能出發方法能拿到表單的所有東西
    submitFrom(formName){
      this.$refs[formName].validate( (valid)=>{
        if(valid){
          // 如果校檢通過，再裡向後端返送使用者資訊和密碼
          login({
            name:this.rulesFrom.name,password:this.rulesFrom.password,}).then((data)=>{
            console.log(data);
     EASsW       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)

總結

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