SpringBoot使用JWT集成Ng-Alain

雨点打透心脏的1/2处 2022-04-13 07:24 292阅读 0赞

Ng-Alain与SpringBoot整合其实本身也并不复杂，SpringBoot专注于后台业务实现，而[Ng-Alain][]则专注于前端页面展现。以下是两者的集成步骤

*  [spring initializr][]新建SpringBoot工程
 *  下载Ng-Alain源码，并拷贝至工程的`ng_alain`目录下，打开`_mock`目录下各种模拟接口实现，SpringBoot中参考实现相应接口，具体实现可参考源码链接中Github的源码
 *  `ng build --prod`构建前端工程，在`dist`目录下，可以看到构建后的工程文件
 *  Spring Boot工程中增加JWT实现，主要包括Token的生成与校验，主要实现包`cn.cib.action.jsonwebtoken`以及`cn.cib.action.security`，注意：Ng-Alain认证模块`@delon/auth`中会在HTTP请求头中包含Token信息。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70]

因此，我们`JsonWebTokenAuthenticationFilter`实现类中，我们需要将Request校验头设置为`token`，代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 1]

*  修改`pom.xml`文件，当构建SpringBoot工程时，将dist中的文件拷贝至`resources`目录下

<plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <version>3.0.2</version>
                    <executions>
                        
                        <execution>
                            <id>copy-resources</id>
                            <phase>validate</phase>
                            <goals>
                                <goal>copy-resources</goal>
                            </goals>
                            <configuration>
                                <outputDirectory>${project.basedir}/src/main/resources/public</outputDirectory>
                                <resources>
                                    <resource>
                                        <directory>${project.basedir}/ng_alain/dist</directory>
                                        <excludes>
                                            <exclude>*.gz</exclude>
                                        </excludes>
                                    </resource>
                                </resources>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>

*  启动工程，访问 [http://localhost:8090][http_localhost_8090]，自动跳转至登录页面 [http://127.0.0.1:8090/\#/passport/login][http_127.0.0.1_8090_passport_login]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 2]

输入用户名和密码，跳转至默认主页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 3]

我们可以看到登录请求的返回信息如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 4]

#### 源码链接：[https://github.com/ypmc/springboot-ngalain-jwt][https_github.com_ypmc_springboot-ngalain-jwt] ####

[Ng-Alain]: https://ng-alain.com/zh
[spring initializr]: http://start.spring.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70]: /images/20220413/88b1bf2037be437db46d4b1b949733e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 1]: /images/20220413/aa29666a005f4100b2421bd88dc3e04a.png
[http_localhost_8090]: http://localhost:8090
[http_127.0.0.1_8090_passport_login]: http://127.0.0.1:8090/#/passport/login
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 2]: /images/20220413/e5dd120b8c3c4ea499378f83e4db4a5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 3]: /images/20220413/7b0c1e575e4242afa2f5492db37ac899.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 4]: /images/20220413/6342811641744f7f97294f1cdeac2fb6.png
[https_github.com_ypmc_springboot-ngalain-jwt]: https://github.com/ypmc/springboot-ngalain-jwt