美食杰项目---登录 注册 退出

   

路由守卫

首先我们先测试一下数据

登录注册的功能逻辑: 1.beforeEach

有些路由需要登录状态时,判断是否需要登录

不需要登录的直接跳转到首页

需要登录的进入判断:判断是否已经登录,如果已经登录,直接跳转首页

没有登录,跳转到登录页 

// 测试数据,功能完成后删除
// var islogin = true;
router.beforeEach(async (to,from,next)=>{
    // console.log(to)

    // 进入路由守卫时,向后端发送token,验证是否合法
    const data = await userInfo();
    // console.log(data)
    Store.commit('chnageUserInfo',data.data);

    if(to.matched.some(item => item.meta.login)){//判断一下是否需要登录
        console.log('需要登录');
        const token =  localStorage.getItem('token');
        //!!将数据类型转为布尔值 
        const islogin = !!token;
        if(islogin){
           if(data.error === 400){//后端告诉你,token不合法
            next({name:'login'});
            localStorage.removeItem('token')
            return;
           } 
            next();
            return;
       }

    // 没登录状态  但是要进入登录页
       if(!islogin && to.name == 'login'){
           next();
       }

    // 没登录,要进入的页面也不是登录页
       if(!islogin && to.name !== 'login'){
           next({name:'login'});
       }
        
    }else{
        next()
    }
})

登录页样式

<template>
  <div class="login-section">
    <!-- :rules="rules" -->
    <el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :model='ruleForm'
      :rules='rules'
    >
      <el-form-item label="用户名" prop="name" >
        <el-input type="text" v-model="ruleForm.name" placeholder="请输入名字"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password"  v-model="ruleForm.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitFrom()">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

登录页功能实现代码

<script>
import {login} from '@/service/api';

export default {
  data() {
    return {
      ruleForm:{
        name:"",
        password:""
      },
      rules:{
        name:[
          {required:true,message:'请输入用户名',trigger:'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'}
          
        ]
      }
    };
  },
  methods: {
    submitFrom(){
      login({
        name:this.ruleForm.name,
        password:this.ruleForm.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);
        }
      });
    }
  }
}
</script>

退出页面

 在vuex中写入的内容:

const store = new Vuex.Store({
  state:{
    userInfo: {}
  },
  getters:{
    isLogin(state){
      return !!Object.keys(state.userInfo).length;
    }
  },
  mutations:{
    chnageUserInfo(state, data){
      state.userInfo = data;
    }
  },
  actions:{}
})

获取vuex中的userInfo和getters中的方法

computed:{
    isLogin(){
      return this.$store.getters.isLogin;
    },
    userInfo(){
      return this.$store.state.userInfo;
    }
  },

在methods中设置一个事件 用来进行退出操作 当执行确认键的时候删除localstorage中的token值 删除完成后跳转到首页 点击取消就不会跳转

 methods:{
    loginOut(){
      this.$confirm('真的要走了吗?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(async()=>{
        const data = await login_out();
        localStorage.removeItem('token');
        window.location.href = '/'
      })

    }
  }

ps:注册页面和登录页面相似

今天的内容到这里就结束啦! 晚安