SpringBoot使用JWT集成Ng-Alain

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信息。

在这里插入图片描述

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

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

            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.0.2</version>
                <executions>
                    <!-- copy dist folder to src/resource/ -->
                    <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://127.0.0.1:8090/#/passport/login

在这里插入图片描述

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

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

在这里插入图片描述

SpringBoot使用JWT集成Ng-Alain

源码链接：https://github.com/ypmc/springboot-ngalain-jwt

猜你喜欢