如何在NativeScript应用中保存用户登录状态实现免重复登录？

Hey there! 我之前在NativeScript项目里折腾过登录状态持久化的需求，给你分享几个亲测有效的方案，根据你的场景选就行～

这个是NativeScript自带的API，不需要额外安装依赖，适合存储非敏感的轻量数据（比如用户昵称、过期时间较短的token）。

实现步骤： #

1. 登录成功后保存状态：
   登录接口返回用户凭证（比如token）后，把需要的信息存在Application Settings里：

import { ApplicationSettings } from "@nativescript/core";

// 登录成功后调用
function saveLoginState(userInfo: { token: string; username: string }) {
  ApplicationSettings.setString("auth_token", userInfo.token);
  ApplicationSettings.setString("username", userInfo.username);
  ApplicationSettings.setBoolean("is_logged_in", true);
}

2. App启动时校验状态：
   在App的入口文件（比如app.ts或者主组件的mounted生命周期里）检查本地是否有保存的登录状态，有就直接跳转到首页，否则走登录流程：

import { ApplicationSettings } from "@nativescript/core";
import { Frame } from "@nativescript/core";

// 启动时检查
const isLoggedIn = ApplicationSettings.getBoolean("is_logged_in", false);
if (isLoggedIn) {
  Frame.topmost().navigate({ moduleName: "home/home-page" });
} else {
  Frame.topmost().navigate({ moduleName: "login/login-page" });
}

3. 退出登录时清空状态：

function logout() {
  ApplicationSettings.remove("auth_token");
  ApplicationSettings.remove("username");
  ApplicationSettings.setBoolean("is_logged_in", false);
  Frame.topmost().navigate({ moduleName: "login/login-page", clearHistory: true });
}

如果需要存储敏感信息（比如长期有效的JWT token），推荐用@nativescript/secure-storage，它在iOS上用Keychain，Android上用Keystore，数据会加密存储，更安全。

实现步骤： #

1. 先安装依赖：

npm install @nativescript/secure-storage

2. 保存和读取登录状态：

import { SecureStorage } from "@nativescript/secure-storage";

const secureStorage = new SecureStorage();

// 保存token
async function saveSecureToken(token: string) {
  await secureStorage.set({
    key: "secure_auth_token",
    value: token
  });
}

// 读取token
async function getSecureToken() {
  const token = await secureStorage.get({ key: "secure_auth_token" });
  return token;
}

// 退出时删除
async function clearSecureToken() {
  await secureStorage.remove({ key: "secure_auth_token" });
}

之后启动校验的逻辑和方案1类似，只是读取时用异步方法就行。

如果你的项目用了Vue/Angular/React，配合状态管理（比如Vuex、NgRx、Redux）会更优雅：

• 把用户登录状态存在全局store里
• 登录成功后，把store里的状态持久化到本地存储（用上面的两种方案之一）
• 启动App时，先从本地存储读取数据，同步到store里
• 之后所有组件都可以直接从store获取登录状态，不用每次读本地存储

举个Vuex的简单例子：

// store/index.ts
import Vue from "nativescript-vue";
import Vuex from "vuex";
import { ApplicationSettings } from "@nativescript/core";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isLoggedIn: false,
    token: "",
    username: ""
  },
  mutations: {
    SET_LOGIN_STATE(state, payload) {
      state.isLoggedIn = true;
      state.token = payload.token;
      state.username = payload.username;
    },
    CLEAR_LOGIN_STATE(state) {
      state.isLoggedIn = false;
      state.token = "";
      state.username = "";
    }
  },
  actions: {
    login({ commit }, userInfo) {
      // 这里调用登录接口
      // 登录成功后
      commit("SET_LOGIN_STATE", userInfo);
      // 持久化到本地
      ApplicationSettings.setString("auth_token", userInfo.token);
      ApplicationSettings.setString("username", userInfo.username);
      ApplicationSettings.setBoolean("is_logged_in", true);
    },
    initAuthState({ commit }) {
      const isLoggedIn = ApplicationSettings.getBoolean("is_logged_in", false);
      if (isLoggedIn) {
        const token = ApplicationSettings.getString("auth_token");
        const username = ApplicationSettings.getString("username");
        commit("SET_LOGIN_STATE", { token, username });
      }
    },
    logout({ commit }) {
      commit("CLEAR_LOGIN_STATE");
      ApplicationSettings.remove("auth_token");
      ApplicationSettings.remove("username");
      ApplicationSettings.setBoolean("is_logged_in", false);
    }
  }
});

然后在App启动时调用store.dispatch('initAuthState')就行。

• 绝对不要存明文密码：只存服务端返回的认证凭证（比如JWT token），密码只能在登录时传给服务端，本地绝不留存。
• token过期处理：如果用JWT，要监听过期时间，提前请求刷新token，或者过期后自动跳回登录页。
• 退出时清空所有相关数据：记得清除本地存储的所有登录相关信息，并且要清除路由历史（比如clearHistory: true），防止用户后退回到登录后的页面。

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