聊聊uniapp中登出登入的方法

UniApp 是一款跨平台的開發框架，可用於建立 iOS、Android、H5 等多個平台的應用程序，開發者使用 UniApp 開發應用程式時，可能會遇到需要登出登入的情況。本篇文章將介紹 UniApp 中登出登入的方法。

1. 清空本地存儲

退出登入時，最簡單的方法就是清空本地存儲，這樣就可以避免用戶在退出登入後，再次打開應用時恢復到之前的登入狀態。清空本地儲存可使用 uni.removeStorageSync(key) 方法。其中，key 表示需要清除的本機儲存的 key 值。

例如：

uni.removeStorageSync('token');

這樣就可以清除本地儲存中名為 “token” 的 key 值。

2. 呼叫後台介面

在登出登入時，除了清除本機存儲，還可以呼叫後台接口，讓後台伺服器清除目前使用者的登入狀態。呼叫後台介面時，需要將使用者的 token值 傳遞給伺服器端，讓伺服器能夠辨別目前使用者。

例如：

uni.request({
  url: 'http://localhost:3000/logout',
  method: 'POST',
  data: {
    token: uni.getStorageSync('token')
  },
  success: (res) => {
    // 请求成功，清除本地存储中的 token 值
    uni.removeStorageSync('token');
  }
});

在這段程式碼中，透過 uni.request 方法向後台伺服器發送請求，並將目前使用者的 token 值傳遞給伺服器端。如果請求成功，清除本機儲存中的 token 值。

3. 使用外掛程式

除了手動清除本機儲存體和呼叫後台介面外，UniApp 還提供了專門的外掛程式來實現登出登入功能。例如，uni-simple-router 插件。

透過該外掛程式可以實現：

import {UniSimpleRouter} from 'uni-simple-router';
const router = new UniSimpleRouter({
  routes,
  login: {
    path: '/pages/login/login'
  },
  forbidNamed: ['index']
});

router.beforeEach((to, from, next) => {
  if (to.allowAnonymous === undefined) { // 不是通过 allowAnonymous 允许的匿名则判断登录状态
    const isLogin = uni.getStorageSync('isLogin');
    if (!isLogin) { // 如果未登录
      uni.removeStorageSync('token'); // 清除 token
      if (router.LOGIN_PAGE_NAME) { // 如果有指定的登录页面，则跳转到该页面
        router.push({name: router.LOGIN_PAGE_NAME});
      } else if (router.options.login) { // 如果有指定的全局登录页面，则跳转到该页面
        router.push({path: router.options.login.path});
      } else { // 否则跳转到默认登录页面
        router.push({name: 'login'});
      }
      next(false);
    } else { // 如果已登录，则继续执行
      next();
    }
  } else { // 如果是通过 allowAnonymous 允许的匿名，则直接执行
    next();
  }
});

export default router;

在這段程式碼中，使用uni-simple-router 外掛程式來實現退出登錄，具體方法是透過清除token 值，然後跳到指定的頁面，進行重新登入。

總結

以上三種方法都可以實現在UniApp 中退出登入的功能，其中使用外掛程式較為簡單，但需要下載並配置外掛程式才能實現；而清空本地儲存和呼叫後台接口則需要手動處理，適用於一般的小型應用。無論使用哪種方法，都需要清空登入狀態，避免使用者在登出登入後，再次開啟應用程式時恢復到先前的登入狀態。

以上是聊聊uniapp中登出登入的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！