美食杰登录注册(路由守卫)

一，路由守卫：beforEach

                有些路由时需要登录状态的，判断登录状态(是否需要登录)
   ​             不需要登录的， 直接跳转
   ​             需要登录的：进入下一步判断：
   ​                    a. 判断是否已经登录，如果以及登录，直接跳转
   ​                    b. 判断是否已经登录，如果没有登录，跳转到登录页

代码如下：

//from:从哪里来
//to:到哪里去
//next:审核结果

//测试数据,功能完成后删除
// 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()
    }
})

export default router;

二，登录注册样式图

注册的样式和储存数据的代码如下：

<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"></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="submitForm()">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

methods: {
    submitForm(){
        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)
          }
        })
    }
  }

   这就是关于登录注册的路由守卫               

            谢谢支持！