前端config:
开启代理解决和远程服务器跨域的问题。
Q:部署到nigix的时候不清楚是否还需要开启反向代理?
proxy: {
'/server/api/': {
target: 'http://localhost:8080/',
changeOrigin: true,
secure: false, // 如果是https接口,需要配置这个参数为true
pathRewrite: { '^/server': '' },
},
},
参考:在 model 中请求服务端数据
一种常见的规避跨域的方法就是:把 ajax 请求发送到你的本地开发服务器,然后本地开发服务器再把 ajax 请求转发到远端去,从网络拓扑上看本地开发服务器起着「反向代理」的作用。本地服务器和远端服务器是「服务器和服务器间的通信」,就不存在跨域问题了。
配置代理也很简单,只需要您在配置文件 config/config.js 中与 routes 同级处增加 proxy 字段
下面把登录相关前后端串起来跑一下。
调整下 service/login.js :
登录时/server/api/login/account 被按照代理的配置调整为
http://localhost:8080/api/login/account
其它则还是通过mock获取数据
export async function accountLogin(params) {
return request('/server/api/login/account', {
method: 'POST',
data: params,
});
}
models/login 中调用该方法
import { accountLogin } from '@/services/login';
...
const Model = {
effects: {
*login({ payload }, { call, put }) {
const response = yield call(accountLogin, payload);
...
}
...
}
...
}
后端调整
创建个类来定义登录返回的数据格式:
public class LoginData {
private String token;
private String type;
...
}
调整登录方法:
@RestController
public class LoginController {
@Autowired
private UserService userService;
@PostMapping(value = "api/login/account")
@ResponseBody
public JsonResult login (@RequestBody Map<String,String> map){
String userName = map.get("userName");
String passWord = map.get("passWord");
String type = map.get("type");
//身份验证
String token = userService.checkUser(userName,passWord);
LoginData data = new LoginData();
data.setToken(token);
data.setType(type);
if (!"".equals(token)) {
return JsonResult.success("成功", data);
}
return JsonResult.error("用户名及密码错误");
}
}
因为登录的请求路径改变了不再是/login,调整下请求的拦截器配置:
@Configuration
public class WebAppConfig implements WebMvcConfigurer{
@Autowired
private RequestInterceptor requestInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
// 拦截所有请求,通过判断是否有 @LoginRequired 注解 决定是否需要登录
registry.addInterceptor(requestInterceptor).addPathPatterns("/**").excludePathPatterns("/api/login/account");
}
}
扩展下原有的SysPerm实体类,用以支持菜单及权限控制:
后续开发功能方便展现成树形,以及将每个用户的菜单返回给前端。
@Entity
@Table(name = "sys_perm")
public class SysPerm{
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private long id;
private String permCode;
private String permName;
private String icon;
private long pid;
private String type;
private Integer orderBy;
....
}
接下来初始化些数据库数据:
application.yml加入配置,使服务启动时去执行sql脚本:
spring:
datasource:
initialization-mode: always
data: classpath:data.sql
web模块中的resources 放入data.sql文件如下:
-- 角色
INSERT INTO sys_role(role_code, role_name)
SELECT 'admin', '管理员' FROM DUAL WHERE NOT EXISTS
(SELECT role_code FROM sys_role WHERE role_code = 'admin');
INSERT INTO sys_role(role_code, role_name)
SELECT 'user', '普通用户' FROM DUAL WHERE NOT EXISTS
(SELECT role_code FROM sys_role WHERE role_code = 'user');
-- 菜单权限
INSERT INTO sys_perm (perm_code, perm_name, icon, pid, type, order_by)
select '/welcome', '欢迎', '', -1, 'menu', 1 FROM DUAL WHERE NOT EXISTS
(SELECT perm_code FROM sys_perm WHERE perm_code = '/welcome');
INSERT INTO sys_perm (perm_code, perm_name, icon, pid, type, order_by)
select '/sysMange', '系统管理', '', -1, 'menu', 900 FROM DUAL WHERE NOT EXISTS
(SELECT perm_code FROM sys_perm WHERE perm_code = '/sysMange');
select @permId := id from sys_perm where perm_code='/sysMange';
INSERT INTO sys_perm (perm_code, perm_name, icon, pid, type, order_by)
select '/sysMange/permManage', '菜单权限', '', @permId, 'menu', 910 FROM DUAL WHERE NOT EXISTS
(SELECT perm_code FROM sys_perm WHERE perm_code = '/sysMange/permManage');
INSERT INTO sys_perm (perm_code, perm_name, icon, pid, type, order_by)
select '/sysMange/userManage', '用户管理', '', @permId, 'menu', 920 FROM DUAL WHERE NOT EXISTS
(SELECT perm_code FROM sys_perm WHERE perm_code = '/sysMange/userManage');
-- 角色-权限
select @roleId := id from sys_role where role_code = 'admin';
select @permId := id from sys_perm where perm_code='/welcome';
INSERT INTO sys_role_perm (role_id, perm_id)
select @roleId, @permId FROM DUAL WHERE NOT EXISTS
(SELECT perm_id FROM sys_role_perm WHERE perm_id = @permId and role_id = @roleId);
select @permId := id from sys_perm where perm_code='/sysMange';
INSERT INTO sys_role_perm (role_id, perm_id)
select @roleId, @permId FROM DUAL WHERE NOT EXISTS
(SELECT perm_id FROM sys_role_perm WHERE perm_id = @permId and role_id = @roleId);
select @permId := id from sys_perm where perm_code='/sysMange/permManage';
INSERT INTO sys_role_perm (role_id, perm_id)
select @roleId, @permId FROM DUAL WHERE NOT EXISTS
(SELECT perm_id FROM sys_role_perm WHERE perm_id = @permId and role_id = @roleId);
select @permId := id from sys_perm where perm_code='/sysMange/userManage';
INSERT INTO sys_role_perm (role_id, perm_id)
select @roleId, @permId FROM DUAL WHERE NOT EXISTS
(SELECT perm_id FROM sys_role_perm WHERE perm_id = @permId and role_id = @roleId);
select @roleId := id from sys_role where role_code = 'user';
select @permId := id from sys_perm where perm_code='/welcome';
INSERT INTO sys_role_perm (role_id, perm_id)
select @roleId, @permId FROM DUAL WHERE NOT EXISTS
(SELECT perm_id FROM sys_role_perm WHERE perm_id = @permId and role_id = @roleId);
-- 用户
INSERT INTO sys_user(user_name, pass_word)
SELECT 'system', '202cb962ac59075b964b07152d234b70' FROM DUAL WHERE NOT EXISTS
(SELECT user_name FROM sys_user WHERE user_name = 'system');
INSERT INTO sys_user(user_name, pass_word)
SELECT 'guest', '202cb962ac59075b964b07152d234b70' FROM DUAL WHERE NOT EXISTS
(SELECT user_name FROM sys_user WHERE user_name = 'guest');
-- 用户-角色
select @roleId := id from sys_role where role_code='admin';
INSERT INTO sys_user_role(role_id, user_name)
SELECT @roleId, 'system' FROM DUAL WHERE NOT EXISTS
(SELECT user_name FROM sys_user_role WHERE role_id = @roleId and user_name = 'system');
select @roleId := id from sys_role where role_code='user';
INSERT INTO sys_user_role(role_id, user_name)
SELECT @roleId, 'guest' FROM DUAL WHERE NOT EXISTS
(SELECT user_name FROM sys_user_role WHERE role_id = @roleId and user_name = 'guest');
-- 用户-数据源
INSERT INTO sys_user_datasource(data_source_id, user_name)
SELECT 'master', 'system' FROM DUAL WHERE NOT EXISTS
(SELECT data_source_id FROM sys_user_datasource WHERE data_source_id = "master" and user_name = 'system');
INSERT INTO sys_user_datasource(data_source_id, user_name)
SELECT 'master', 'guest' FROM DUAL WHERE NOT EXISTS
(SELECT data_source_id FROM sys_user_datasource WHERE data_source_id = "master" and user_name = 'guest');
手动清理掉原本数据库的表,方便生成新的结构和数据。
运行下前后端项目,测试访问下登录。OK。