第十一次作业

最新推荐文章于 2024-08-04 21:47:53 发布

hinxx

最新推荐文章于 2024-08-04 21:47:53 发布

阅读量186

点赞数 1

文章标签：笔记 mybatis spring boot

本文链接：https://blog.csdn.net/hinxx/article/details/140163381

版权

1.过滤器功能

加入过滤器后，如果直接进入reader.html则显示

登录后才可继续进行下一步，并跳转到reader.html

登录后生成jwt令牌：

Demofilter代码如下

package com.library.filter;

import com.alibaba.fastjson.JSONObject;
import com.library.Utils.JwtUtils;
import com.library.pojo.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.StringUtils;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Slf4j
@WebFilter(urlPatterns = "/*")//拦截所有请求

public class DemoFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
    }

    @Override//拦截到请求之后都会调用
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest req=(HttpServletRequest)servletRequest;
        HttpServletResponse resp=(HttpServletResponse)servletResponse;

        //1.获取url

        String url=req.getRequestURL().toString();
        log.info("请求的url: {}",url);

        //2.判断请求url中是否含有login，如果含有，说明是登录操作，放行。
        if(url.contains("login")){
            log.info("登陆操作，放行...");
            filterChain.doFilter(servletRequest,servletResponse);
            return;
        }
        //3.获取请求头中的令牌（token）
        String jwt=req.getHeader("token");

        //4.判断令牌是否存在，如果不存在，返回错误结果（未登录）
        if(!StringUtils.hasLength(jwt)){
            log.info("请求头为空，返回未登录的信息");
            Result error=Result.erro("NOT_LOGIN");
            //手动转换 对象——json------>阿里巴巴fastjson
            String notLogin= JSONObject.toJSONString(error);
            resp.getWriter().write(notLogin);
            return;
        }
        //5.解析token，如果失败，返回错误结果   ----try catch快捷键Ctrl+alt+t
        try {
            JwtUtils.parseJWT(jwt);
        } catch (Exception e) {//解析失败
            e.printStackTrace();
            log.info("解析了令牌失败，返回登录错误信息");
            Result error=Result.erro("NOT_LOGIN");
            //手动转换 对象——json------>阿里巴巴fastjson
            String notLogin= JSONObject.toJSONString(error);
            resp.getWriter().write(notLogin);
            return;
        }
        //6.放行
        log.info("令牌合法，放行");
        filterChain.doFilter(servletRequest,servletResponse);
//        System.out.println("拦截到的请求");
//        //放行
//        filterChain.doFilter(servletRequest,servletResponse);
//        System.out.println("放行");
    }

    @Override
    public void destroy() {
        Filter.super.destroy();
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录后信息放在session中</title>
    <!-- 引入组件库 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="js/element.css">
    <style>
        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100%;
        }
        .form-container {
            width: 300px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="form-container">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="onReset">取消</el-button>
            </el-form-item>
        </el-form>
        <!-- 登录成功的弹窗 -->
        <el-dialog title="提示" :visible.sync="dialogVisible">
            <p>登录成功！</p>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false; goToReaderPage();">确定</el-button>
            </span>
        </el-dialog>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                },
                dialogVisible: false
            }
        },
        methods: {
            onSubmit() {
                var url =`login`;
                axios.post(url, {
                    username: this.form.username,
                    password: this.form.password
                })
                    .then(response => {
                        const token = response.data.data.token;
                        localStorage.setItem('token', token);

                        if(response.data.data.code!=1) {
                            location.href = 'reader.html';
                        }
                        else {
                            console.log("登录失败");
                        }
                    })
                    .catch(error=>{
                        console.error(error);
                        alert('登录失败，请检查您的用户名和密码');
                    })
            },
            onReset() {
                this.form.username = '';
                this.form.password = '';
            },
            goToReaderPage() {
                location.href = '/reader.html';
            }
        }
    });
</script>
</body>
</html>

reader.html部分代码

 findAll(num) {
                if(num==0){
                    this.pageNum =1;
                }else
                {this.pageNum = num;}
                var url = `reader/${this.pageNum}/${this.pageSize}`
                axios.get(url, {
                    headers:{
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                }).then(res => {
                    this.tableData = res.data.data.rows;
                    this.total=res.data.data.total;
                }).catch(error => {
                    if (error.response) {
                        const { status } = error.response;
                        // 检查返回的状态码来确定是否未登录
                        if (status === 401) {
                            // 未登录，重定向到登录页面
                            alert('请先登录');
                            location.href = 'login.html';
                        } else {
                            // 处理其他错误情况
                            console.error('Error:', error.response);
                        }
                    } else {
                        // 打印网络错误
                        console.error('Network Error:', error);
                    }
                })
            }

LoginController

 @PostMapping("/login")
   public Result login(@RequestBody Reader reader){
       log.info("登录:{}",reader);
       Reader r=readerService.login(reader);
//       return r!=null?Result.success():Result.erro("登陆失败");
       if(r!=null){
           Map<String, Object> claims=new HashMap<>();
           claims.put("username",r.getUsername());
           claims.put("password",r.getPassword());
           String token = JwtUtils.generateJwt(claims);
           System.out.println(token);

           Map<String, String> response = new HashMap<>();
           response.put("token", token);

           return Result.seccess(token);
       }
       return Result.erro("登陆失败");
    }