After uniapp successfully logs in, jump to other pages and refresh

With the development of the Internet, mobile terminal development has become more and more important. Based on this, uniapp emerged as the times require and has become a popular cross-platform mobile development framework today. In uniapp, login is a very common function, and the refresh problem is also an issue that needs to be considered during the development process. This article will introduce in detail how to jump to other pages to refresh after successful login in uniapp.

1. Prerequisite knowledge

Before starting the introduction, we need to introduce some prerequisite knowledge in uniapp.

1. Routing

The routing in uniapp is implemented by the built-in uni.navigateTo and uni.redirectTo methods of uni-app. Among them, uni.navigateTo is used to jump to the next page and can return to the previous page; uni.redirectTo is used to redirect to the next page and cannot return to the previous page.

In addition, uniapp also has uni.reLaunch for closing all pages and opening the current page, uni.switchTab for jumping to the tabBar page, and uni.navigateBack for returning to the previous page.

2.vue.js framework

uniapp is implemented based on the vue.js framework, so you need to master the relevant basic syntax and functions of vue.js during the development process, such as component development, State management, life cycle, etc.

3. Asynchronous request

When implementing the login function, a request needs to be sent to the background to verify the correctness of the user's login information. Therefore, you need to master the relevant knowledge of uni.request asynchronous requests.

4. Local storage

In uniapp, you can use uni.setStorageSync and uni.getStorageSync to store and read local data. Local storage helps share data across multiple pages and enables persistent storage of data.

2. Solution introduction

In the process of jumping to other pages to refresh after successful login, we need to complete the following two tasks:

1. Save user login Status information

2. Determine user login status information on other pages and re-render the page

Next we will introduce in detail how to implement these two tasks.

1. Save user login status information

After the user successfully logs in, we need to save the user's login status information. The implementation plan is as follows:

Step1: In the callback function of successful login, send a request to the background to obtain the user's login status information and save it locally.

uni.request({
  url: 'http://www.example.com/login',
  data: {
    username: 'username',
    password: 'password'
  },
  success: (res) => {
    if(res.statusCode !== 200) {
      uni.showModal({
        content: '登录失败，请检查用户名和密码是否正确'
      })
    } else {
      // 保存用户登录状态信息
      uni.setStorageSync('isLogin', true)
      //跳转到其他页面
      uni.navigateTo({
        url: '/pages/other/other'
      })
    }
  }
})

In the callback function of successful login, we send a login request to the background. If the request is successful, we save the user's login status information locally. In this example, we set the key name of the user's login status information to isLogin, and its value is true.

2. Determine whether the user has logged in on other pages and re-render the page

After the user has logged in and jumps to other pages, we need to determine whether the user has logged in on other pages and Render the page based on login status information. The implementation plan is as follows:

Step1: In the onLoad life cycle function of other pages, determine whether the user has logged in.

onLoad() {
  if(!uni.getStorageSync('isLogin')) {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

In the onLoad life cycle function of other pages, we obtain the user login status information saved locally through uni.getStorageSync. If isLogin does not exist, that is, the user is not logged in, we redirect to the login page to allow the user to log in again.

Step2: In the onShow life cycle function of other pages, determine whether the user has logged in and render the page based on the login status information.

onShow() {
  if(uni.getStorageSync('isLogin')) {
    //重新渲染页面
    console.log('已经登录')
  } else {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

In the onShow life cycle function of other pages, we also obtain the user login status information stored locally through uni.getStorageSync. If isLogin exists, i.e. the user is logged in, we can re-render the page. If isLogin does not exist, that is, the user is not logged in, we redirect to the login page to allow the user to log in again.

3. Summary

This article introduces the solution to jump to other pages to refresh after successful login in uniapp. By saving the user's login status information and determining whether the user has logged in on other pages and re-rendering the page based on the login status information, we can better implement and manage the user's login function. The above solutions are for reference only, and developers can modify and optimize them according to their actual needs.

The above is the detailed content of After uniapp successfully logs in, jump to other pages and refresh. For more information, please follow other related articles on the PHP Chinese website!