JianghuJS-登录鉴权

学习目标

• 学习jianghujs鉴权登录过程、逻辑
• 尝试自定义登录页

1. 登录过程

登录过程包括

• 用户输入账号密码
• 前端发送登录请求
• 后端验证用户信息
• 后端返回登录结果
• 前端根据结果执行相应操作。

在登录成功后，前端会存储用户信息(localStorage, cookie)，以便后续的鉴权操作。

2. 鉴权机制

鉴权是系统验证用户访问资源的权限。用户登录后会得到身份标识，如 token。每次请求需要鉴权的资源时，用户需在请求头中携带身份标识。服务端通过验证身份标识来判断用户是否有访问权限。

在江湖JS中，鉴权步骤如下：
1. 用户登录成功(login.passwordLoginresource)后，返回一个用户维度的authToken 并给页面生成cookie
2. 用户访问页面时会根据cookie查询用户信息，判断用户是否有当前页面的访问权限
3. 前端每一次请求都需要传authToken，后端根据authToken查询用户信息，判断当前用户是否有此resouce的访问权限

鉴权通过后会将用户信息挂载到当前请求的上下文 this.ctx.userInfo

登录请求示例
代码来自: /node_modules/@jianghujs/jianghu/app/view/page/loginV4.html

const result = await jianghuAxios({
  data: {
    appData: {
      pageId: 'login',
      actionId: 'passwordLogin',
      actionData: { userId, password, deviceId: "设备ID", deviceType: 'web' },
    }
  }
});
if (result.data.appData.resultData.authToken) {
  localStorage.setItem(`${window.appInfo.appId}_authToken`, data.data.appData.authToken);
  localStorage.setItem(`${window.appInfo.appId}_userId`, data.data.appData.userId);
  localStorage.setItem(`${window.appInfo.appId}_deviceId`, deviceId);
  vtoast.success('登陆成功');
  let redirectTo = `/${window.appInfo.appId}`;
  if (redirectUrl) {
    redirectTo = decodeURIComponent(redirectUrl);
  }
  location.href = redirectTo;
}

3. 自定义登录页

为了提供更好的用户体验，我们可以自定义登录页的样式和内容。

在page目录下创建/app/view/page/login.html ，会覆盖默认江湖JS默认的登录页面。

小结

通过以上课程，我们了解了江湖JS中的登录鉴权机制。可以思考以下问题：

• 清除浏览器的localStorage 和 cookie后，然后再次访问重定向到了登录页，思考一下为什么会出现这个现象。