首页 > 编程学习 > Spring Security 前后端分离(前端篇)

Spring Security 前后端分离(前端篇)

发布时间:2022/11/15 10:30:21

上一篇 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

Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式