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

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

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

前端

源码：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

测试

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

1. 访问登录页
   http://localhost:9528/#/login
   

2. 登录
   帐号：user，密码：123456

3. 登录成功，则进入主页
   

4. 使用错误的帐号密码，登录失败则异常提示
   

总结

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

end