Spring Security 前后端分离（前端篇）

拼搏现实的明天。 2023-10-02 23:01 47阅读 0赞

上一篇 [Spring Security 前后端分离][Spring Security] 实现了 Spring Security 将响应 JSON 格式数据。而这只能说是前后端分离的一环，前后端分离怎么能少得了前端呢。

笔者搜罗到一个开源的 vue 项目模板 [vue-admin-template][]，基于此项目做了改造，来对接我们上文的 Spring Security后台。

### 前端 ###

源码：[https://gitee.com/markix/vue-admin-template][https_gitee.com_markix_vue-admin-template]

#### 基于 vue-admin-template 的改造 ####

1.  请求改成代理发出（解决跨域问题）  
    request.js 去掉 axios 的 `baseURL`；vue.config.js 配置代理 `devServer.proxy`；
2.  修改对接接口、接口路径、响应状态码
3.  修改 permission.js 中用户是否已登录的判定

#### 准备 ####

*  安装依赖 `npm install --registry=https://registry.npm.taobao.org`
 *  启动前端 `npm run dev`

### 后端 ###

源码：[https://gitee.com/markix/spring-security-example/tree/master/spring-security-simple-restful][https_gitee.com_markix_spring-security-example_tree_master_spring-security-simple-restful]

### 测试 ###

*  启动前端，地址为 `http://localhost:9528`
 *  启动后端，地址为 `http://localhost:8080`

1.  访问登录页  
    http://localhost:9528/\#/login  
    ![在这里插入图片描述][40fc77194d444762a345c47ef937d559.png]
2.  登录  
    帐号：user，密码：123456
3.  登录成功，则进入主页  
    ![在这里插入图片描述][b90dcc69e267404eb22932310d1777f0.png]
4.  使用错误的帐号密码，登录失败则异常提示  
    ![在这里插入图片描述][5da8f3aefc1a471d88267a9a740b7a71.png]

### 总结 ###

这样，一个最基本的前后端分离并且有登录认证的项目已经准备好了。后续可以开发像用户管理、角色管理、菜单管理等后端功能，前端则可以基于角色，将用户的菜单渲染出来等等。

--------------------

end

[Spring Security]: https://markix.blog.csdn.net/article/details/127843905
[vue-admin-template]: https://gitee.com/panjiachen/vue-admin-template
[https_gitee.com_markix_vue-admin-template]: https://gitee.com/markix/vue-admin-template
[https_gitee.com_markix_spring-security-example_tree_master_spring-security-simple-restful]: https://gitee.com/markix/spring-security-example/tree/master/spring-security-simple-restful
[40fc77194d444762a345c47ef937d559.png]: https://img-blog.csdnimg.cn/40fc77194d444762a345c47ef937d559.png
[b90dcc69e267404eb22932310d1777f0.png]: https://img-blog.csdnimg.cn/b90dcc69e267404eb22932310d1777f0.png
[5da8f3aefc1a471d88267a9a740b7a71.png]: https://img-blog.csdnimg.cn/5da8f3aefc1a471d88267a9a740b7a71.png