uniapp login jump page

With the development of mobile applications, many developers choose to use uniapp for application development. A major feature of uniapp is that it supports cross-platform, which not only improves development efficiency, but also makes the operation and maintenance of applications simpler and easier. Convenience. In uniapp applications, the login jump page is a common function. Let's discuss the specific steps on how to implement the uniapp login jump page.

1. First create a login page, you can use the template provided by uniapp, or you can write your own code to implement it.
2. In the login page, you need to introduce the login component officially provided by uniapp. The code is as follows:

<template>
  <view>
    <form>
      <input type="text" v-model="account" placeholder="请输入账号"/>
      <input type="password" v-model="password" placeholder="请输入密码"/>
      <button type="submit" @click="login">登录</button>
    </form>
  </view>
</template>

<script>
  import { login } from '@/api/user'

  export default {
    data() {
      return {
        account: '',
        password: ''
      }
    },
    methods: {
      async login() {
        // 调用登录接口，接口返回登录状态
        const res = await login({ account: this.account, password: this.password })

        // 如果登录成功，就跳转到主页
        if (res.code === 200) {
          uni.switchTab({ url: '/pages/index' })
        } else {
          uni.showToast({
            title: '登录失败',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

In the above code, we wrote a basic login form and added it in The login interface is called when the form is submitted. If the login is successful, it will jump to the homepage; if the login fails, a pop-up window will prompt that the login failed.

3. In the login interface, we need to verify the account password and check whether the account number and password entered by the user are correct. If correct, return the status code of successful login and return with the user information; otherwise Returns the status code and error message of failed login.

import request from '@/utils/request'

// 登录接口
export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

In the above code, we use the network request library request officially recommended by uniapp to send requests. At the same time, we need to transmit and encrypt data according to the requirements of the back-end interface.

4. On the home page, we need to determine the user's login status. If the user is logged in, the user's information will be displayed; if the user is not logged in, jump to the login page to log in.

<template>
  <view>
    <text v-if="isLogin">欢迎你，{{ userInfo.name }}</text>
    <view v-else>
      <text>请先登录</text>
      <button @click="gotoLogin">去登录</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLogin: false,
        userInfo: {}
      }
    },
    onLoad() {
      // 判断用户是否已登录
      this.checkLogin()
    },
    methods: {
      checkLogin() {
        // 检查本地存储中是否存在登录信息
        const loginInfo = uni.getStorageSync('loginInfo')
        if (loginInfo && loginInfo.isLogin) {
          this.isLogin = true
          this.userInfo = loginInfo.userInfo
        }
      },
      gotoLogin() {
        // 跳转到登录页面
        uni.navigateTo({ url: '/pages/login' })
      }
    }
  }
</script>

In the above code, we check whether login information exists in local storage through the checkLogin method. If it exists, set isLogin to true and set userInfo to the user information in local storage; Otherwise, set isLogin to false, indicating that the user is not logged in. If the user is not logged in, he can use the gotoLogin method to jump to the login page for login operations.

5. After successful login, we need to save the login status and user information to local storage so that we can automatically log in the next time we open the application.

async login() {
  // 调用登录接口，接口返回登录状态
  const res = await login({ account: this.account, password: this.password })

  // 如果登录成功，就跳转到主页
  if (res.code === 200) {
    // 保存登录状态和用户信息到本地存储中
    uni.setStorageSync('loginInfo', { isLogin: true, userInfo: res.data.userInfo })
    uni.switchTab({ url: '/pages/index' })
  } else {
    uni.showToast({
      title: '登录失败',
      icon: 'none'
    })
  }
}

In the above code, we use the local storage API provided by uniapp to save and read the state, taking e'setStorageSync' and 'getStorageSync' as examples. In this way, we can realize the function of uniapp login jump page and provide better support for application development and user experience.

The above is the detailed content of uniapp login jump page. For more information, please follow other related articles on the PHP Chinese website!