.自定义认证前端页面

简介: .自定义认证前端页面

1-前端代码

  • 📎login.html
  • 拷贝上述路径到下述位置,注意没有对应文件夹则需要手动创建

2-后端代码

1.定义接口

这里我们在原来的基础之上,继续追加一个即可,我就简单的添加一下哥哥的地址吧

package com.yzxb.SpringSecurity.web;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("demo")
public class HelloController {
    @GetMapping
    public String helloWorld() {
        return "Hello Spring Security";
    }
    // 这个是新增的
    @RequestMapping("/index")
    public String index(){
        return "油炸小波,欢迎加入IKUN大家庭";
    }
}

2.创建配置类

package com.yzxb.SpringSecurity.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .anyRequest().authenticated().and().formLogin()
                .loginPage("/login.html")
                .loginProcessingUrl("/doLogin")
                .defaultSuccessUrl("/demo/index")
                .failureUrl("/login.html")
                .usernameParameter("uname")
                .passwordParameter("passwd")
                .permitAll()
                .and()
            .csrf().disable();
    }
}

这个配置类非常重要,笔者带领大家单独解释一下。

(1)configure是一个链式配置,这里不用链式配置也可以,那就每一个属性设置后再http.重新开始写

(2)authenticated()表示开始权限配置,.anyRequest().authenticated()表示所有请求都需认证才可访问

(3)and()会返回HttpSecurityBuilder对象的一个子类(实际就是HttpSecurity),所以and方法相当于又回到HttpSecurity,重新开启新一轮的配置

(4)formLogin()表示开启表单登录配置,loginPage("")用来配置登录页面地址;loginProcessingUrl("")用来配置登录接口地址;defaultSuccessUrl("")用来表示登陆成功后的跳转地址;failureUrl("")表示登录失败后的跳转地址;usernameParameter、passwordParameter表示登录用户名、密码参数名称;permitAll()表示跟登录相关的接口和页面不做拦截,直接通过。

(5)csrf().disable()表示禁用CSRF防御功能,SpringSecurity自带CSRF机制,这里为了测试方便临时关闭。

3-启动验证

  • 启动工程后访问地址:http://localhost:8080/demo/index
  • 页面自动跳转至我们自己创建的登录页面,用户名:user,密码:参照idea控制台打印

  • 输入用户名、密码后跳转返回我们的接口信息

相关文章
|
4月前
|
开发框架 前端开发 JavaScript
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
4月前
|
开发框架 前端开发 JavaScript
在Vue前端项目中,附件展示的自定义组件开发
在Vue前端项目中,附件展示的自定义组件开发
在Vue前端项目中,附件展示的自定义组件开发
|
20天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
14天前
|
JSON 前端开发 数据格式
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
63 2
前端JS读取文件内容并展示到页面上
|
1月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
28 1
|
1月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
19 1
|
21天前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
35 0
|
2月前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
173 1