《美食街》项目---（登录篇）{ ‘blur‘焦点属性，resetFields()，meta对象，$confirm，window.location.href=‘/‘}-CSDN博客

本文链接：https://blog.csdn.net/AAAXEC/article/details/127703758

1.通过element进行布局（如图）：

在这里插入图片描述

代码展示：
login.vue

**trigger: ‘blur’**焦点属性；

<template>
  <div class="login-section">
    <!-- :rules="rules" -->
    <el-form
    :model="ruleFrom"
    :rules="rules"
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      ref="ruleFromTwo"
    >
      <el-form-item label="用户名" prop="name" autocomplete="off">
        <el-input  v-model="ruleFrom.name" type="text"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password"  autocomplete="off">
        <el-input v-model="ruleFrom.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitFrom('ruleFromTwo')">提交</el-button>
        <el-button @click="resetFrom('ruleFromTwo')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {login} from '@/service/api';
export default {
  data() {
    return {
      ruleFrom:{
        name:'',
        password:''
      },
      rules:{
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
      submitFrom(forName){
        this.$refs[forName].validate(async (v)=>{ //validata验证器

          // console.log(valid)
              if(v){//判断验证是否通过
                  login({
                    name: this.ruleFrom.name,
                    password: this.ruleFrom.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{
                this.$message.error('请按照要求输入')
                return false
              }
        });
      },
      resetFrom(forName){
        this.$refs[forName].resetFields();//重置表单数据以及验证结果
      }
  }
}
</script>
<style lang="stylus">
.login-section
  padding 0px 20px
</style>

2.先进行表单校验，'validata’验证器。校验通过向后端发送用户名和密码。

validata:对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise…

于element组件网站中查找from表单列后边的属性，有详细介绍；

如代码所示方法中的

提交方法：

1.：输入第一步判断validata的验证是否通过：

—通过则往下执行，校验不通过则弹出提示框“请按要求输入”

2.校验通过.then触发，开始进行内部判断：

—判断如果result.code=0表示输入成功，跳转到首页，如果result.code=1弹出用户或密码输入错误，请重新输入

重置方法：

3.设置重置方法：

如代码所示：resetFields()
属性，来对表单中的值进行清理重置，这也是element组件中的方法。

3.通过路由守卫进行验证登录，在需要进行登录的路由里面添加一个meta对象。需要登录的判断是否已经登录，在跳转到不同的页面。并把所获取信息存于VueX中，方便后期调用。

router index.js中：

router.beforeEach(async (to,from,next)=>{
    // 验证登录
    // 有些路由是需要登录的。判断登录状态；
    // 1.没有登录，跳转到登录页
    // 2.登录，直接进入
    // 有些路由不需要登录，可直接进入
    
    const token=localStorage.getItem('token')
    const islogin=!!token
   //由于可能从浏览器控制台上，伪造token值，所以每次都需要验证token， 然后再去执行守卫的功能
  //不管路由需不需要登录，都会涉及到是否展示用户信息
  //所以，向后端发送请求，拿用户信息，用来验证是否合法
  
    const data = await userInfo();
    Store.commit('chnageUserInfo',data.data) 
     //将所获取的信息传给vuex库中
    
    // some 循环判断里面如果有一个为false就返回false
    //检测目标路由,是否需要验证 使用遍历to.matched数组判断meta的requiresAuth字段
    if (to.matched.some(item => item.meta.login)){
     if (isLogin) {//需要登录，并且登录成功的状态
      if(data.error===400){//token 不合法
        localStorage.removeItem('token')
        next({ name: 'login' });
        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()
  }
})

// to ：即将进入的路由信息
// from ：即将离开的路由信息
// next() ：是否通过
// 参数：无通过
// false 不通过
// 具体地址跳转到指定的地址

Vuex库：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state:{
    userInfo: {},
    activeName:{}
  },
  getters:{
    isLogin(state){
      return !!Object.keys(state.userInfo).length;
    }
  },
  mutations:{
    chnageUserInfo(state, data){
      state.userInfo = data;
    }
  },
  actions:{}
})
export default store;

4.信息同步到导航栏中，达到最后的效果：

header.vue中：

<template>
  <el-header style="height: auto;">
    <div class="header">
      <div class="header_c">
        <el-row type="flex" justify="start" align="middle">
          <el-col :span="6">
            <a href="" class="logo">
            </a>
          </el-col>
          <el-col :span="10" :offset="2"></el-col>
          <el-col :span="6" :offset="3" class="avatar-box" v-show="islogin">
            <router-link :to="{name:'space'}">
              <el-avatar style="vertical-align: middle;" :src="userInfo.avatar" shape="square" size="medium" ></el-avatar>
            </router-link>
            <router-link :to="{name:'space'}" class="user-name">{{userInfo.name}}</router-link>
            <router-link :to="{name:'create'}" class="collection">发布菜谱</router-link>
            <a href="javascript:;" class="collection" @click="loginOut">退出</a>
          </el-col>
          <el-col :span="6" :offset="3" class="avatar-box" v-show="!islogin">
            <router-link :to="{name:'login'}" class="user-name">登录</router-link>
            <router-link :to="{name:'login'}" class="collection">注册</router-link>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav_c">
        <Menus></Menus>
      </div>
    </div>
  </el-header>
</template>
<script>
import Menus from '@/components/menus'
import {login_out} from '@/service/api'
export default {
  name: 'headers',
  components: {Menus},
  computed:{
      islogin(){
        return this.$store.getters.isLogin
      },
      userInfo(){
        return this.$store.state.userInfo
      }
  },
  methods:{
    loginOut(){
      this.$confirm('确定要退出么？','提示',{
        confirmButtonText:'小爷我走啦，拜嘞',
        cancelButtonText: '小爷我又不想走了',
        type:'warning'
      }).then(async()=>{
        const data= await login_out();
        localStorage.removeItem('token')
        window.location.href='/'
      })
    }  
  },
}
</script>
<style lang="stylus">
.header 
  height 129px
  background-color #c90000 
  .logo 
    display: block;
    height: 129px;
    width: 184px;
    background url(https://s1.c.meishij.net/n/images/logo2.png) -15px 9px no-repeat;
.header_c, .nav_c
  width 990px
  margin 0 auto 
.nav-box 
  height 60px
  background-color #fff;
  box-shadow 10px 0px 10px rgba(0,0,0,0.3)
.user-name
  margin-left 5px
  color #fff
.collection 
  margin-left 5px  
  color #fff
</style>

在上一步方法中，我们将信息存于VueX库中。
通过计算属性，来获取VueX中的两条数据：
islogin：为检验用户信息，而备的属性；当有用户信息，则为1；
userInfo：为用户信息；
通过对islogin值的判断，来进行对，未登录/注册—和—已注册后的状态修改。
有一个事件触发：退出账号事件？

this.$confirm('确定要退出么？','提示',{
        confirmButtonText:'小爷我走啦，拜嘞',
        cancelButtonText: '小爷我又不想走了',
        type:'warning'

这行代码，也是一中提示框
里面的属性作用显而易见，confirmButtonText为确定；cancelButtonText为取消；

在进行确认操作后，async异步处理，awaite来等待执行完成后，在将存在本地的token数据清除，调转主页，退出账号任务完成！

window.location.href=‘/’：快速跳转默认网页

若有疑问、不清楚的地方及时提问哦

小作者在持续更新中…