Vue實現(xiàn)登錄以及登出詳解

更新時間：2021年09月24日 11:02:45 作者：難過的新手村

本篇文章主要介紹了vue實現(xiàn)登陸登出的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

錄頁面的布局
創(chuàng)建兩個Vue.js文件
一個我們來做登錄頁和注冊頁
登錄頁面的布局
配置路由
登錄表單的數(shù)據(jù)綁定
登錄表單的驗證規(guī)則
登錄表單的重置
登錄預驗證
登錄組件配置彈窗提示
登錄成功后的行為
將登錄之后的token，保存到客戶端的sessionStorage中
通過編程式導航跳轉(zhuǎn)到后臺主頁，路由地址是默認路徑 '/'
在我們首頁的登出，組件配置彈窗提示，把我們的token使用removeItem刪除

登錄業(yè)務(wù)流程

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

2.調(diào)用后臺接口進行驗證

3.通過驗證之后，根據(jù)后臺得響應(yīng)狀態(tài)跳轉(zhuǎn)到項目主頁

登錄功能實現(xiàn)

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

{
    path:'/login',
    name:"login",
    component:login,
    meta:{
      login:true
    }
} 
  // 需要登錄的地方定義meta-true  看他需不需要登錄
   if(to.matched.some(item=>item.meta.login)){//需要登錄
    console.log("需要登錄");
    if(isLogin){//1.已經(jīng)登錄，直接通過
        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.表單的驗證規(guī)則，我們用的是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>

定義表單的驗證規(guī)則

詳細的看Element官網(wǎng)from表單

在Data里面定義

rulesFrom:{
        name:'',
        password:''
      },
      rules:{
        name:[
          // 驗證規(guī)則
          {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定義提交事件

 // 當我們點擊提交的時候能出發(fā)方法能拿到表單的所有東西
    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中給他轉(zhuǎn)換

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