VUE實現註冊與登入效果
阿新 • • 發佈:2021-09-24
本文例項為大家分享了實現註冊與登入效果的具體程式碼,供大家參考,具體內容如下
1.效果展示
2.註冊效果實現
<template> <div class="login-section"> <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model="rulesForm" status-icon ref="ruleForm" > <el-form-item label="使用者名稱" prop="name"> <el-input type="text" v-model="rulesForm.name"></el-input> </el-form-item> <el-form-item label="密碼" prop="password"> <el-input type="password" v-model="rulesForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >提交</el-button> <el-button >重置</el-button> </el-form-item> </el-form> </div> </template> <script> import {register} from '@/service/api'; export default { data() { return { rulesForm:{ name:'',password:'' },rules:{ name:[ {required:true,message:'請輸入名字',trigger:"blur"},{min:1,max:5,message:"長度3-5",trigger:"blur"} ],password:[ {required:true,message:'請輸入密碼',{min:3,trigger:"blur"} ] } }; },methods: { submitForm(formName){ this.$refs[formName].validate((valid)=>{ if(valid){ //如果校檢通過,在這裡向後端傳送使用者名稱和密碼 register({ name: this.rulesForm.name,password: this.rulesForm.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; } }); } } } </script> <style lang="stylus"> .login-section padding 0px 20px </style>
3.登入頁面實現
<template> <div class="login-section"> <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model="rulesForm" status-icon ref="ruleForm" > <el-form-item label="使用者名稱" prop="name"> <el-input type="text" v-model="rulesForm.name"></el-input> </el-form-item> <el-form-item label="密碼" prop="password"> <el-input type="password" v-model="rulesForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button>重置</el-button> </el-form-item> </el-form> </div> </template> <script> import {login} from '@/service/api'; export default { data() { return { //儲存資料的物件 rulesForm:{ name:'',methods: { submitForm(formName){ this.$refs[formName].validate((valid)=>{ if(valid){ //如果校檢通過,在這裡向後端傳送使用者名稱和密碼 login({ name: this.rulesForm.name,data.data.token); window.location.href= '/'; } if(data.code === 1){ this.$message.error(data.mes) } }); }else{ console.log("error submit!!"); return false; } }); } } } </script> <style lang="stylus"> .login-section padding 0px 20px </style>
4.路由跳轉實現
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Store from '@/store'
import {userInfo} from '@/service/api.'
import Login from '@/views/user-login/index.vue'
const router = new Router({
mode:"history",routes:[
{
path:'/login',name:"login",title:"登入頁",component:Login,meta:{
login:true
}
}
]
});
//路由守衛
router.beforeEach( async (to,from,next) => {
/*
有些路由是需要登入的,判斷登入狀態
1.沒有登入:跳轉到登入頁
2.登入:直接進入
有些路由是不需要登入的,直接進入
ps:是否需要登入 --meta
*/
const token = localStorage.getItem('token');
const isLogin = !!token;
//進入路由的時候,需要向後端傳送token,驗證是否合法
const data = await userInfo();
Store.commit('chageUserInfo',data.data)
if(to.matched.some(item => item.meta.login)){//需要登入
console.log("需要登入");
if(isLogin){//已經登入的,直接通過
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'){//未登入,但是要去WOnNwdpqD登入頁
next();
}
if(!isLogin && to.name !== 'login'){//未登入,去的也不是登入頁
WOnNwdpqD next({name:'login'});
}
}else{
next();
}
})
export default router;
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。