Let’s talk about how to log out in uniapp

UniApp is a cross-platform development framework that can be used to build applications for multiple platforms such as iOS, Android, and H5. When developers use UniApp to develop applications, they may encounter situations where they need to log out. This article will introduce how to log out in UniApp.

1. Clear local storage

When logging out, the easiest way is to clear the local storage, so as to prevent the user from reverting to the original state when opening the application again after logging out. Previous login status. To clear local storage, use the uni.removeStorageSync(key) method. Among them, key represents the locally stored key value that needs to be cleared.

For example:

uni.removeStorageSync('token');

This will clear the key value named "token" in the local storage.

2. Call the background interface

When logging out, in addition to clearing the local storage, you can also call the background interface to let the background server clear the current user's login status. When calling the background interface, the user's token value needs to be passed to the server so that the server can identify the current user.

For example:

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

In this code, a request is sent to the backend server through the uni.request method, and the token value of the current user is passed to the server. If the request is successful, clear the token value in local storage.

3. Using plug-ins

In addition to manually clearing local storage and calling the backend interface, UniApp also provides a specialized plug-in to implement the logout function. For example, the uni-simple-router plugin.

Through this plug-in, you can achieve:

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;

In this code, use the uni-simple-router plug-in to log out. The specific method is to clear the token value and then jump to the specified page and log in again.

Summary

The above three methods can all realize the function of logging out in UniApp. Using a plug-in is relatively simple, but it requires downloading and configuring the plug-in to achieve it; clearing the local storage and calling the background The interface requires manual processing and is suitable for general small applications. No matter which method is used, the login status needs to be cleared to prevent the user from reverting to the previous login status when opening the app again after logging out.

The above is the detailed content of Let’s talk about how to log out in uniapp. For more information, please follow other related articles on the PHP Chinese website!