vue實現登錄功能

Posted on 2020-12-31 by WalkonNet

1.背景

完成瞭登錄的表單輸入框界面如下:

代碼:

<!-- 輸入框-->
   <el-form label-width="0px" class="login_form">
    <!-- 用戶名 -->
    <el-form-item >
     <el-input prefix-icon="el-icon-s-custom"></el-input>
    </el-form-item>
    <!-- 密碼 -->
    <el-form-item >
     <el-input prefix-icon="el-icon-lock"></el-input>
    </el-form-item>
    <!-- 按鈕區域 -->
    <el-form-item >
     <el-button type="primary">登錄</el-button>
     <el-button type="info">重置</el-button>
    </el-form-item>
   </el-form>

2.表單數據綁定

可以查看element的官方案例

本案例代碼如下:

<div>
    <!-- 輸入框-->
    <el-form :model="loginForm" label-width="0px" class="login_form">
     <!-- 用戶名 -->
     <el-form-item>
      <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
     </el-form-item>
     <!-- 密碼 -->
     <el-form-item>
      <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
     </el-form-item>
     <!-- 按鈕區域 -->
     <el-form-item>
      <el-button type="primary">登錄</el-button>
      <el-button type="info">重置</el-button>
     </el-form-item>
    </el-form>
   </div>

<script>
 export default {
  name: "Login",
  data() {
   return {
    loginForm: {
     username: 'admin',
     password: '123456'
    }
   }
  }
 }
</script>

3.表單數據格式錯誤提示

官方案例:

本案例代碼如下:

<template>
 <div class="login_container">
  <div class="login_box">
   <!--登錄logo-->
   <div class="avatar_box">
    <img src="../assets/logo.png" alt="">
   </div>
   <div>
    <!-- 輸入框-->
    <el-form :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
     <!-- 用戶名 prop="username" 與表單驗證屬性對應-->
     <el-form-item prop="username">
      <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
     </el-form-item>
     <!-- 密碼 -->
     <el-form-item prop="password">
      <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
     </el-form-item>
     <!-- 按鈕區域 -->
     <el-form-item>
      <el-button type="primary">登錄</el-button>
      <el-button type="info">重置</el-button>
     </el-form-item>
    </el-form>
   </div>
  </div>
 </div>
</template>

<script>
 export default {
  name: "Login",
  data() {
   return {
    // 表單數據
    loginForm: {
     username: 'admin',
     password: '123456'
    },
    // 表單驗證
    loginRules: {
     username: [
      // trigger: 'blur' 表示失去焦點觸發
      {required: true, message: '請輸入登錄賬號', trigger: 'blur'},
      {min: 5, max: 12, message: '長度在 6 到 12 個字符', trigger: 'blur'}
     ],
     password: [
      {required: true, message: '請輸入密碼', trigger: 'blur'},
      {min: 6, max: 20, message: '長度在 6 到 20 個字符', trigger: 'blur'}
     ],
    }
   }
  }
 }
</script>

<style lang="less" type="text/less" scoped>
 .login_container {
  background-color: #2b4b6b;
  height: 100%;
 }

 .login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
   height: 130px;
   width: 130px;
   border: 1px solid #eee;
   border-radius: 50%;
   padding: 10px;
   box-shadow: 0 0 10px #ddd;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;

   img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
   }
  }
 }

 .login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
 }


</style>

4.表單重置功能

官方案例如下:

本案例代碼:

<template>
 <div class="login_container">
  <div class="login_box">
   <!--登錄logo-->
   <div class="avatar_box">
    <img src="../assets/logo.png" alt="">
   </div>
   <div>
    <!-- 輸入框-->
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
     <!-- 用戶名 prop="username" 與表單驗證屬性對應-->
     <el-form-item prop="username">
      <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
     </el-form-item>
     <!-- 密碼 -->
     <el-form-item prop="password">
      <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
     </el-form-item>
     <!-- 按鈕區域 -->
     <el-form-item>
      <el-button type="primary">登錄</el-button>
      <el-button type="info" @click="resetLoginForm">重置</el-button>
     </el-form-item>
    </el-form>
   </div>
  </div>
 </div>
</template>

<script>
 export default {
  name: "Login",
  data() {
   return {
    // 表單數據
    loginForm: {
     username: '',
     password: ''
    },
    // 表單驗證
    loginRules: {
     username: [
      // trigger: 'blur' 表示失去焦點觸發
      {required: true, message: '請輸入登錄賬號', trigger: 'blur'},
      {min: 5, max: 12, message: '長度在 6 到 12 個字符', trigger: 'blur'}
     ],
     password: [
      {required: true, message: '請輸入密碼', trigger: 'blur'},
      {min: 6, max: 20, message: '長度在 6 到 20 個字符', trigger: 'blur'}
     ],
    }
   }
  },
  methods:{
   // 重置登錄表單
   resetLoginForm(){
    this.$refs.loginFormRef.resetFields()
   }
  }
 }
</script>

<style lang="less" type="text/less" scoped>
 .login_container {
  background-color: #2b4b6b;
  height: 100%;
 }

 .login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
   height: 130px;
   width: 130px;
   border: 1px solid #eee;
   border-radius: 50%;
   padding: 10px;
   box-shadow: 0 0 10px #ddd;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;

   img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
   }
  }
 }

 .login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
 }


</style>

5.請求發出前數據校驗

// 登錄
   login() {
    // 登錄前參數驗證
    this.$refs.loginFormRef.validate((valid) => {
     if (!valid) {
      console.log("參數驗證失敗")
      return
     }
     console.log("參數校驗成功")
    })
   }

6.發起登錄請求

1.安裝:axios(可以cnpm安裝,也可以下載js引入文件)

cnpm install axios -S
-D 等價於 –save-dev
-S 等價於 –save

2.引入到vue項目中

import axios from ‘axios’
axios.defaults.baseURL = ‘http://127.0.0.1:XXXX/XXXXX’
Vue.prototype.$http = axios

3.發起登錄請求

<template>
 <div class="login_container">
  <div class="login_box">
   <!--登錄logo-->
   <div class="avatar_box">
    <img src="../assets/logo.png" alt="">
   </div>
   <div>
    <!-- 輸入框-->
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
     <!-- 用戶名 prop="username" 與表單驗證屬性對應-->
     <el-form-item prop="username">
      <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
     </el-form-item>
     <!-- 密碼 -->
     <el-form-item prop="password">
      <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
     </el-form-item>
     <!-- 按鈕區域 -->
     <el-form-item>
      <el-button type="primary" @click="login">登錄</el-button>
      <el-button type="info" @click="resetLoginForm">重置</el-button>
     </el-form-item>
    </el-form>
   </div>
  </div>
 </div>
</template>

<script>
 export default {
  name: "Login",
  data() {
   return {
    // 表單數據
    loginForm: {
     username: '',
     password: ''
    },
    // 表單驗證
    loginRules: {
     username: [
      // trigger: 'blur' 表示失去焦點觸發
      {required: true, message: '請輸入登錄賬號', trigger: 'blur'},
      {min: 5, max: 12, message: '長度在 6 到 12 個字符', trigger: 'blur'}
     ],
     password: [
      {required: true, message: '請輸入密碼', trigger: 'blur'},
      {min: 6, max: 20, message: '長度在 6 到 20 個字符', trigger: 'blur'}
     ],
    }
   }
  },
  methods: {
   // 重置登錄表單
   resetLoginForm() {
    this.$refs.loginFormRef.resetFields()
   },
   // 登錄
   login() {
    // 登錄前參數驗證
    this.$refs.loginFormRef.validate(async (valid) => {
     if (!valid) {
      console.log("參數驗證失敗")
      return
     }
     // 發起網絡請求登錄
     let {data: result} = await this.$http.post('login', this.loginForm)
     console.log("result:" + result)
     if (result.meta.status !== 200) {
      console.log("登錄失敗")
      return
     }
     console.log("登錄成功")
    })
   }
  }
 }
</script>

<style lang="less" type="text/less" scoped>
 .login_container {
  background-color: #2b4b6b;
  height: 100%;
 }

 .login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
   height: 130px;
   width: 130px;
   border: 1px solid #eee;
   border-radius: 50%;
   padding: 10px;
   box-shadow: 0 0 10px #ddd;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;

   img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
   }
  }
 }

 .login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
 }


</style>

7.消息提示配置

1.添加element 消息組件

2.使用

8.登錄成功後token存放

// 登錄
   login() {
    // 登錄前參數驗證
    this.$refs.loginFormRef.validate(async (valid) => {
     if (!valid) return ;
     // 發起網絡請求登錄
     let {data: result} = await this.$http.post('login', this.loginForm)
     console.log(result)
     if (result.meta.status !== 200){
      this.$message.error(result.meta.msg)
      return
     }
     this.$message.success("登錄成功")
     // token放入 sessionStorage
     window.sessionStorage.setItem('token', result.data.token)
     // 跳轉到home路徑
     this.$router.push("/home")
    })
   }

9.路由導航守衛-登錄攔截

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'

Vue.use(Router)

const router = new Router({
 routes: [
  {
   path: "/",
   redirect: "/login"
  },
  {
   path: '/login',
   name: 'Login',
   component: Login
  }
  ,
  {
   path: '/home',
   name: 'Home',
   component: Home
  }
 ]
})
router.beforeEach((to, from, next) => {
 // to 將要訪問的路徑
 // from 從哪裡跳轉來的
 // next 放行

 // 判斷是不是登錄登錄,登錄路徑直接放行
 if (to.path == '/login') {
  next()
  return
 }
 // 獲取token,看是否有token,有token放行
 const token = window.sessionStorage.getItem("token")
 if (!token) {
  next('/login')
  return;
 }
 // 放行
 next();
})
export default router

10.退出功能

<template>
 <div>
  <el-button type="info" @click="logout">退出</el-button>
 </div>
</template>

<script>
 export default {
  name: "Home",
  methods: {
   // 退出登錄
   logout() {
    window.sessionStorage.clear()
    this.$router.push("/login")
   }
  }
 }
</script>

<style lang="less" scoped>

</style>

以上就是vue實現登錄功能的詳細內容，更多關於vue 登錄功能的資料請關註WalkonNet其它相關文章！

vue實現登錄功能

1.背景

2.表單數據綁定

3.表單數據格式錯誤提示

4.表單重置功能

5.請求發出前數據校驗

6.發起登錄請求

7.消息提示配置

8.登錄成功後token存放

9.路由導航守衛-登錄攔截

10.退出功能

推薦閱讀：

發佈留言取消回覆

近期文章

1.背景

2.表單數據綁定

3.表單數據格式錯誤提示

4.表單重置功能

5.請求發出前數據校驗

6.發起登錄請求

7.消息提示配置

8.登錄成功後token存放

9.路由導航守衛-登錄攔截

10.退出功能

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆