版权声明:未经允许,不得转载 https://blog.csdn.net/kangkanglou/article/details/84579913
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
输入用户名和密码,跳转至默认主页
我们可以看到登录请求的返回信息如下: