前端认证
1.创建登录页面
启动vue npm run serve
2.创建连接
修改页面方法
submitForm(formName) { // 验证 this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); // // main //location.href="/main"; // 强制更改路由 this.$router.push("/main") } else { console.log('error submit!!'); return false; } }); },
登录后跳转成功
3.获取当前用户
将用户数据存入localstorage (前端储存)
取出数据
4.退出
methods:{ logout(){ //清除 localStorage.clear(); //跳转 location.href="/login" } }
操作成功
5.认证
路由守卫
未认证则无法登录
myrouter.beforeEach((to,from,next)=>{ // login // path =login 或者是 认证成功 if(to.path=='/login'||localStorage.getItem('user')){ next() }else{ // 没有登录 alert("您还没有登录") next({path:'/login'}) } }) To : 目的地 From: 当前的信息 Next : 函数 ({path:’/login’}) Next({path:to.path}) : 默认包含了你的目的地的地址
前后端分离,不能用前端控制后端,也不能用后端控制前端
后端获得认证信息
1.启动redis并连接,创建redis配置
启动
jar包
配置文件
2.创建java类和链接
@PostMapping public Result login ( User user){ QueryWrapper queryWrapper =new QueryWrapper(); queryWrapper.eq("username",user.getUsername()); queryWrapper.eq("password",user.getPassword()); User one = userService.getOne(queryWrapper); //保存用户信息 if(one!=null){ redisTemplate.opsForHash().put(user.getUsername(),"name",user.getUsername()); redisTemplate.opsForHash().put(user.getUsername(),"password",user.getPassword()); } return Result.success(one); }
redis已保存
引入插件将对象转变为map对象
<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.5.8</version> </dependency>
3.获取redis里面存入的信息
分页
1.添加mybatis plus 分页插件
@Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));//如果配置多个插件,切记分页最后添加 //interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); 如果有多数据源可以不配具体类型 否则都建议配上具体的DbType return interceptor; }
2.引用分页插件
3.后端接收数据
返回前端
访问页面 配置成功