2024-01-06-vue 路由守卫，拦截器，分页

实现没有登录无法访问其他路由的需求

        先在后端实现登录这一功能

    //controller层
@RestController
@RequestMapping("/d-login")
public class DLoginController {
    @Resource
    private IDLoginService service;
    @PostMapping("login")
    public ResponseVo login(@RequestBody DLogin login){
        Boolean login1 = service.login(login);
        return ResponseVo.success(login1);
    }
}

    //service
public interface IDLoginService extends IService {

    Boolean login(DLogin login);
}

    //serviceImpl
@Service
public class DLoginServiceImpl extends ServiceImpl implements IDLoginService {
    @Override
    public Boolean login(DLogin login) {
        QueryWrapper queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username",login.getUsername());
        queryWrapper.eq("password",login.getPassword());
        DLogin one = this.getOne(queryWrapper);
        return one==null?false:true;
    }
}

         之后在前端页面引用登录接口，并将获取的数据缓存到localStorage（本地存储中），用来给路由守卫判断是否拦截，也可以存储到sessionStorage，二者的区别如下：

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

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

        这之后开始配置路由守卫，在main.js中添加

        这样在不登陆的情况下就无法胡乱访问网页了

拦截器

请求拦截器
        请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

响应拦截器：
        响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

        响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器；

        我们可以尝试一下拦截器的作用

没加请求拦截器的时候，响应头是这个样子的

        在main.js中添加请求拦截器（这里开头是instance是因为前面把引入的axios加了个baseURL重命名为了instance）

        可以看到添加完请求拦截器之后多了一个myname，至于值为什么是underfind，我也不知道

        响应拦截器

        这样在获取响应数据的时候就不用response后面跟一大堆内容，直接使用即可 

分页

        分页有两种，逻辑分页和物理分页，逻辑分页是假分页所有的数据全查出来放内存中，物理分页就是从数据库中直接分页查询，我们主要使用的是物理分页。

        到elementui中复制以个分页控件，记得复制下面data以及methods里的内容

最后达到这样的效果

        然后就到后端里写分页查询的实现

        先添加一个分页插件的设置类

@Configuration
public class PagePlugins {
    /**
     * 添加分页插件
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));//如果配置多个插件,切记分页最后添加
        //interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); 如果有多数据源可以不配具体类型 否则都建议配上具体的DbType
        return interceptor;
    }
}

         再添加一个分页的工具类

@Data
public class PageInfo {
    private  Integer currPage = 1;

    private Integer pageSize = 5;
}

         然后就在controller编写功能

在前端页面引用一下，把返回的数据赋给分页控件的响应数值

便可形成分页的效果