单体应用-前后整合-(1)登录相关

前端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。