如何在Ionic3+PouchDB+CouchDB前端实现Superlogin-Client认证

我来一步步帮你解决这个问题——刚上手SuperLogin的时候，确实容易在配置位置和离线存储上踩坑！

一、导入与配置代码的正确放置位置 #

你得把SuperLogin的导入和配置代码放在应用的入口文件里（比如React Native的App.js、Vue的main.js，或者项目的初始化脚本），一定要让它在其他依赖SuperLogin的代码之前执行，这样应用一启动就能完成SuperLogin的初始化，后续所有组件都能直接用配置好的实例。

举个React Native项目的例子，直接在App.js最顶部这么写：

import PouchDB from 'pouchdb';
import superlogin from 'superlogin-client';

// 先写配置，再初始化
const superloginConfig = {
  baseUrl: 'http://localhost:3000/auth/',
  // 后面会加存储相关的配置
};

superlogin.configure(superloginConfig);

二、配置本地存储，让离线认证生效 #

你之前的代码没起作用，大概率是没正确配置SuperLogin的令牌存储策略。默认情况下它不会自动把令牌存在持久化存储里，所以得手动指定用PouchDB或者AsyncStorage来存。

1. 用PouchDB存储（跨平台通用） #

既然你已经导入了PouchDB，刚好可以用它来存认证数据：

// 先建一个专门存认证信息的PouchDB实例
const authDB = new PouchDB('superlogin-auth');

const superloginConfig = {
  baseUrl: 'http://localhost:3000/auth/',
  // 核心配置：指定用PouchDB存令牌
  tokenStorage: {
    type: 'pouchdb',
    options: {
      db: authDB
    }
  },
  // 可选：开启令牌自动刷新，避免过期
  autoRefresh: true,
  refreshTokenUri: '/auth/refresh'
};

superlogin.configure(superloginConfig);

2. React Native用AsyncStorage更贴合原生 #

如果是React Native项目，用AsyncStorage会更适配原生存储：

import AsyncStorage from '@react-native-async-storage/async-storage';
import superlogin from 'superlogin-client';

const superloginConfig = {
  baseUrl: 'http://localhost:3000/auth/',
  tokenStorage: {
    type: 'asyncStorage',
    options: {
      storage: AsyncStorage
    }
  }
};

superlogin.configure(superloginConfig);

三、离线状态下怎么保持认证？ #

配置好存储后，SuperLogin会自动把令牌和用户信息存在本地。离线时你只需要读取本地存储的内容就能判断用户状态：

// 写个检查认证的函数，离线也能用
const checkAuthStatus = () => {
  const token = superlogin.getStoredToken();
  const userInfo = superlogin.getUser();
  
  // 检查令牌是否存在且未过期
  if (token && userInfo && !superlogin.isTokenExpired(token)) {
    console.log('用户已认证，离线也能正常使用');
    // 这里可以继续渲染登录后的内容
  } else {
    console.log('用户未登录或令牌过期，请重新登录');
    // 跳转到登录页
  }
};

// 应用启动时就调用这个检查
checkAuthStatus();

四、完整的初始化示例代码 #

给你整合一个完整的可用版本：

import PouchDB from 'pouchdb';
import superlogin from 'superlogin-client';

// 初始化认证专用数据库
const authDB = new PouchDB('superlogin-auth');

// 完整的SuperLogin配置
const superloginConfig = {
  baseUrl: 'http://localhost:3000/auth/',
  tokenStorage: {
    type: 'pouchdb',
    options: {
      db: authDB
    }
  },
  autoRefresh: true,
  refreshTokenUri: '/auth/refresh',
  // 配置你需要的登录方式，比如邮箱登录
  providers: {
    email: true
  }
};

// 初始化SuperLogin
superlogin.configure(superloginConfig);

// 应用启动时自动恢复登录状态
const initAuth = () => {
  const storedToken = superlogin.getStoredToken();
  if (storedToken && !superlogin.isTokenExpired(storedToken)) {
    superlogin.setToken(storedToken);
    console.log('自动登录成功，离线状态也能生效');
  }
};

initAuth();

几个排查小技巧 #

• 先确认你的SuperLogin后端服务（http://localhost:3000/auth/）在正常跑，跨域的话要配置好CORS
• 检查PouchDB有没有正确安装：npm install pouchdb --save
• React Native用AsyncStorage的话，要确保装了@react-native-async-storage/async-storage并配置好

内容的提问来源于stack exchange，提问作者Simbarashe