简述若依框架前后端不分离版本登录功能是如何实现的，代码逻辑和系统流程图是怎样的

若依框架前后端不分离版本的登录功能一般是基于 Spring Security 实现的，具体实现步骤如下：

1. 用户在前端页面输入用户名和密码，点击登录按钮。前端将用户名和密码通过接口请求发送到后端。

2. 后端接收到请求后，首先进行用户名密码的校验。校验通过后，生成一个 Token，并将 Token 存储到 Redis 缓存中，同时将 Token 返回给前端。

3. 前端将 Token 存储到本地存储中，以便后续的请求都可以携带 Token。

4. 用户再次请求时，前端会将 Token 携带在请求头中发送给后端。

5. 后端接收到请求后，首先从 Redis 缓存中验证 Token 的合法性，如果验证通过，就允许用户访问资源，否则拒绝访问。

以下是代码逻辑和系统流程图：

1. 前端代码逻辑：

// 登录按钮点击事件
$('#login-btn').click(function() {
  // 获取用户名和密码
  var username = $('#username').val();
  var password = $('#password').val();
  // 发送登录请求
  $.ajax({
    url: '/login',
    type: 'post',
    data: {
      username: username,
      password: password
    },
    success: function(data) {
      // 将 Token 存储到本地存储中
      localStorage.setItem('token', data.token);
      // 跳转到首页
      window.location.href = '/index';
    },
    error: function() {
      alert('用户名或密码错误！');
    }
  });
});

2. 后端代码逻辑：

// 登录接口
@PostMapping("/login")
public R login(@RequestBody LoginVo loginVo) {
  // 校验用户名和密码
  boolean isValid = userService.checkLogin(loginVo.getUsername(), loginVo.getPassword());
  if (!isValid) {
    return R.error("用户名或密码错误！");
  }
  // 生成 Token
  String token = UUID.randomUUID().toString();
  // 将 Token 存储到 Redis 缓存中
  redisTemplate.opsForValue().set(token, loginVo.getUsername(), 30, TimeUnit.MINUTES);
  // 返回 Token
  return R.ok().put("token", token);
}

// 接口权限校验
@GetMapping("/user/info")
@PreAuthorize("hasAuthority('sys:user:info')")
public R userInfo() {
  // 从请求头中获取 Token
  String token = request.getHeader("Authorization");
  if (StringUtils.isBlank(token)) {
    return R.error(HttpStatus.UNAUTHORIZED.value(), "Token 不能为空！");
  }
  // 从 Redis 缓存中验证 Token 的合法性
  String username = redisTemplate.opsForValue().get(token);
  if (StringUtils.isBlank(username)) {
    return R.error(HttpStatus.UNAUTHORIZED.value(), "Token 不合法或已过期！");
  }
  // 返回用户信息
  return R.ok().put("username", username);
}

3. 系统流程图：