springsecurity+webpack打包

springsecurity

简介

在web应用开发过程中，安全框架的使用非常重要，除了对请求发起者的身份进行校验外还可以对用户资源权限进行分类以及对一些恶意攻击提前做好防护措施。springsecurity是spring家族的一款安全管理框架，这款框架发展多年但由于配置整合过程复杂一直没有得到大众的青睐，springboot出现后提供了security的自动化配置方案，springsecurity可以零配置集成进springboot项目。

使用

创建一个springboot项目时，只需要勾选springsecurity引入相关依赖即可

pom文件中的依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

引入springsecurity后，项目中的接口就会被保护起来，用户通过接口访问时请求会被拦截页面重定向至springsecurity提供的/login页面进行登录，进行用户名密码校验。
可以通过application.properties对security用户名密码进行配置，简单校验一下security的功能。

# security
security.basic.enabled=false
security.user.name=admin
security.user.password=admin

也可以在 Java 代码中配置用户名密码，首先需要我们创建一个 Spring Security 的配置类，集成自 WebSecurityConfigurerAdapter 类，如下：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        //下面这两行配置表示在内存中配置了两个用户
        auth.inMemoryAuthentication()
                .withUser("javaboy").roles("admin").password("$2a$10$OR3VSksVAmCzc.7WeaRPR.t0wyCsIj24k0Bne8iKWV1o.V9wsP8Xe")
                .and()
                .withUser("lisi").roles("user").password("$2a$10$p1H8iWa8I4.CA.7Z8bwLjes91ZpY.rYREGHQEInNtAp4NzL6PLKxi");
    }
    @Bean
    PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

参数配置

注解@EnableWebSecurity

@EnableWebSecurity注解一般和 @Configuration 注解一起使用, 注解 WebSecurityConfigurer 类型的类，或者利用@EnableWebSecurity 注解继承 WebSecurityConfigurerAdapter的类，这样就构成了 Spring Security 的配置类

抽象类 WebSecurityConfigurerAdapter

WebSecurityConfigurerAdapter 提供了一种便利的方式去创建 WebSecurityConfigurer的实例，只需要重写 WebSecurityConfigurerAdapter 的方法，即可配置需要具体拦截的URL以及设置权限等安全控制。

webpack打包

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

使用

在node环境下，通过npm install webpack -g的命令引入webpack打包工具，webpack在打包时会生成一个名为bundle.js的文件，webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。
webpack有四大核心概念：入口、输出、loader、插件。

入口（entry）

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点），默认值为 ./src。以下是一个简单的entry配置例子：

## 在webpack.config.js 文件中配置

module.exports = {
  entry: './path/to/my/entry/file.js'
};

输出（output）

output定义了webpack打包后的bundles文件位置以及如何命名这些文件，默认值为 ./dist。基本上整个应用程序结构，都会被编译到指定的输出路径的文件夹中。可以通过在配置中指定一个 output 字段，来配置这些处理过程：

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
};

module.exports = config;

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

插件（plugin）

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
比如可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。
修改 webpack.config.js，代码如下：

## 在webpack.config.js中

var webpack=require('webpack');
 
module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins:[
    new webpack.BannerPlugin('webpack 实例')
    ]
};