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

随缘的阿丘

已于 2022-03-17 19:12:53 修改

阅读量231

点赞数 3

文章标签： p2p 网络协议网络

于 2022-03-13 20:56:18 首次发布

本文链接：https://blog.csdn.net/weixin_67651040/article/details/123465604

版权

该博客介绍了前端路由守卫的实现，通过beforeEach方法检查用户登录状态，确保只有登录后才能访问特定路由。当需要登录时，判断本地存储的token合法性，若无效则重定向至登录页面。同时展示了登录注册界面的样式代码，包括用户名和密码输入框及提交按钮，登录成功后将token保存到本地并跳转。

摘要由CSDN通过智能技术生成

一，路由守卫：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)
          }
        })
    }
  }

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

谢谢支持！