VUE实现注册与登录效果

<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:'请输入密码',trigger:"blur"},          {min:3,max:5,message:"长度3-5",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>

<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:'',        password:''      },      rules:{        name:[          {required:true,message:'请输入名字',trigger:"blur"},          {min:1,max:5,message:"长度3-5",trigger:"blur"}        ],        password:[          {required:true,message:'请输入密码',trigger:"blur"},          {min:3,max:5,message:"长度3-5",trigger:"blur"}        ]      }    };  },  methods: {    submitForm(formName){      this.$refs[formName].validate((valid)=>{          if(valid){              //如果校检通过，在这里向后端发送用户名和密码              login({                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>

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)import Store from '@/store'import {userInfo} from '@/service/api.js'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'){//未登录，但是要去登录页            next();        }        if(!isLogin && to.name !== 'login'){//未登录，去的也不是登录页            next({name:'login'});        }   }else{       next();   }})export default router;