登录页面 & 拦截器 & 路由守卫 & 分页-CSDN博客

本文链接：https://blog.csdn.net/m0_70942204/article/details/135465546

1.实现用户登录跳转

· 后端

UserSevice层接口

boolean login(User user);

UserServiceImpl实现

因为使用的是mabatisPlus所以UserServiceImpl继承serviceImpl，getOne是查一个，new一个QueryWrapper后直接把loginname和password给getOne，他会通过loginname和password查到这个人的信息，判断是否为空来返回false，true

 @Resource
    private UserMapper userMapper;
    @Override
    public boolean login(User user) {
        QueryWrapper queryWrapper = new QueryWrapper();
        queryWrapper.eq("loginname",user.getLoginname());
        queryWrapper.eq("password",user.getPassword());
        User one = this.getOne(queryWrapper);
        return one==null?false:true;
    }

UserController

@RestController
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserServiceImpl userService;
    //认证
    @PostMapping
    public ResponseVo loign(@RequestBody User user){
        boolean login = userService.login(user);
        return ResponseVo.SUCCESS(login);
    }
}

· 前端

<template>
    <div>
        <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" >
            <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" >
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          username: '',
          pass: ''
        },
      };
    },
    methods: {
      submitForm(formName) {
          this.$axios.post("emp",{ename:this.ruleForm.username,pwd:this.ruleForm.pass}).then(res=>{
              if(res==true){
                  // 标识
                  // 存放用户名字
                  localStorage.setItem("user",this.ruleForm.username);
                  // ruleForm
                  //localStorage.setItem("userInfo",JSON.stringify(this.ruleForm));
                  //location.href="/main";
                   this.$router.push({name:'main'});
              }
          })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
</style>

2.本地存储localStorage

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

注意:sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

3.拦截器

· 请求拦截器

    instance.interceptors.request.use(config=>{
   // 头里面加一个参数   myname  
   config.headers.myname=localStorage.getItem("user");
   
   return config;
   })

· 响应拦截器

instance.interceptors.response.use( (res)=> {    
    let repdata = res.data.data;
    return repdata;
  });

4.路由守卫

如果路由在使用的时候需要登录之后才能使用的话就需要使用拦截器

在main.js里面配置即可

router.beforeEach((to,from,next)=>{
    if(to.path=='/'||localStorage.getItem("user")){
        next()
    }else{
        next("/") 
    }
})

解析to,from,next:

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。