login

跳转客户端登录页面。

语法

login(): void

返回值

• void - 无返回值

描述

login 函数会将用户重定向到客户端登录页面。该函数只负责跳转，不会监听登录状态。

设计理念

为什么不使用定时器监听登录状态？

我们选择不在 login 函数中使用定时器监听登录状态，原因如下：

1. 资源效率：定时器会持续消耗系统资源，即使页面不可见时也在运行
2. 精确性：监听cookie变化比定时轮询更精确，能立即响应登录状态变化
3. 用户体验：避免不必要的页面刷新，让用户主动控制何时检查登录状态
4. 可控性：开发者可以根据业务需求选择最合适的登录状态检查时机

推荐的登录状态检查方式

建议在以下场景中检查登录状态：

• 页面重新获得焦点时（focus 事件）
• 用户执行需要登录的操作时
• 监听特定cookie变化时
• 定期的业务逻辑检查点

示例

基本使用

import { login } from '@fu/matrix';

// 触发登录流程
login();

在按钮点击时触发登录

import { login } from '@fu/matrix';

// 添加登录按钮事件
document.getElementById('loginBtn')?.addEventListener('click', () => {
  login();
});

页面焦点重新获得时检查登录状态

import { login, isLogin } from '@fu/matrix';

// 推荐：页面获得焦点时检查登录状态
window.addEventListener('focus', () => {
  if (isLogin()) {
    console.log('用户已登录');
    // 刷新页面或更新UI
    window.location.reload();
  }
});

// 触发登录
function handleLogin() {
  login();
}

监听cookie变化检查登录状态

import { login, isLogin } from '@fu/matrix';

// 监听cookie变化的简单实现
function setupCookieMonitor() {
  let lastLoginState = isLogin();
  
  setInterval(() => {
    const currentLoginState = isLogin();
    if (currentLoginState !== lastLoginState) {
      lastLoginState = currentLoginState;
      if (currentLoginState) {
        console.log('检测到登录状态变化，用户已登录');
        window.location.reload();
      }
    }
  }, 1000); // 1秒检查一次，频率可调
}

// 在需要的时候启动监听
function handleLogin() {
  login();
  setupCookieMonitor();
}

结合业务逻辑检查

import { login, checkLogin } from '@fu/matrix';

// 在执行需要登录的操作时检查
function performUserAction() {
  checkLogin(() => {
    // 用户已登录，执行操作
    console.log('执行需要登录的操作');
  });
}

// 用户点击登录按钮
function handleLoginClick() {
  login();
}

环境支持

• ✅ 浏览器环境
• ✅ Node.js 环境（安全返回，不会抛出错误）

注意事项

• 该函数只能在浏览器环境中正常工作
• 在服务端渲染（SSR）环境中会输出警告并安全返回
• 函数只负责跳转，不会自动刷新页面
• 建议结合 isLogin() 或 checkLogin() 在适当时机检查登录状态
• 推荐监听页面焦点事件或cookie变化来检测登录状态

相关方法

• isLogin - 判断是否已登录
• checkLogin - 校验登录状态并处理未登录情况

版本历史

• v1.0.0: 初始版本，包含定时器监听
• v1.2.0: 移除定时器，简化为纯跳转功能，提高性能和可控性