若依框架登录鉴权详解

若依框架（Ruoyi）后端的登录权限身份认证流程是一个复杂但高效的过程，它确保了系统的安全性和数据的保护。以下是一个典型的若依框架后端登录权限身份认证流程，基于多个来源的信息进行归纳和整理：

1.发起请求获取认证凭证（token）

现象：用户未登录或者token过期，刷新页面将重定向至登录页面

• 如果用户身份验证通过，系统会生成一个认证凭证（如JWT，即JSON Web Token）。
  • 认证凭证的生成过程可能包括生成一个唯一的UUID作为token的一部分，并设置token的有效期（这个有效期可能是通过Redis等缓存系统来控制的，因为JWT本身不直接支持自动刷新有效期）。
  • 生成的token会包含用户的基本信息和权限信息，以便后续进行权限控制和身份验证。
  • 后端通过验证后返回一个包含用户信息的令牌（Token），前端将这个令牌保存起来（如存储在Cookie、LocalStorage或SessionStorage中），以后的请求都需要带上这个令牌进行验证。

​
//login.vue
handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            //存储title至vuex
            this.$store.commit("settings/SET_HEADTITLE",this.title)
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    }
//store/modules/user.js
// 前端登录请求
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid).then(res => {
           //！！！key！！！
          //获取并设置后端传过来的token
          setToken(res.data.token)
          commit('SET_TOKEN', res.data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
//system/SysLoginController
//后端登录响应
    /**
     * 登录方法
     *
     * @param loginBody 登录信息
     * @return 结果
     */
    @SaIgnore
    @PostMapping("/login")
    public R<Map<String, Object>> login(@Validated @RequestBody LoginBody loginBody) {
        Map<String, Object> ajax = new HashMap<>();
        // 生成令牌
        String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
            loginBody.getUuid());
        ajax.put(Constants.TOKEN, token);
        return R.ok(ajax);
    }


​

2. 获取认证信息（user、roles and permission）

不同用户的权限不同，右侧导航条【大层面】和页面中操作按钮【小层面】不同

• 将生成的token和用户的相关信息（如用户ID、角色、权限等）缓存起来，以便后续快速验证和查询。

//store/modules/user.js

// 获取用户信息【前端请求】
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          const user = res.data.user
          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
          if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
            commit('SET_ROLES', res.data.roles)
            commit('SET_PERMISSIONS', res.data.permissions)
          } else {
            commit('SET_ROLES', ['ROLE_DEFAULT'])
          }
          commit('SET_NAME', user.userName)
          commit('SET_AVATAR', avatar)
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    },

//system/SysLoginController
//后端响应返回用户信息【user、roles and permisssions】
    /**
     * 获取用户信息
     *
     * @return 用户信息
     */
    @GetMapping("getInfo")
    public R<Map<String, Object>> getInfo() {
        LoginUser loginUser = LoginHelper.getLoginUser();
        SysUser user = userService.selectUserById(loginUser.getUserId());
        Map<String, Object> ajax = new HashMap<>();
        ajax.put("user", user);
        ajax.put("roles", loginUser.getRolePermission());
        ajax.put("permissions", loginUser.getMenuPermission());
        return R.ok(ajax);
    }