uni-app实现登录和退出登录功能

• 要实现登录和退出登录功能，需要以下步骤：
  
  1. 创建登录界面，包括用户名和密码输入框，登录按钮等。
  
  2. 在登录按钮的点击事件中，获取用户名和密码输入框中的值，然后向服务器发送请求验证用户信息是否正确。
  
  3. 如果验证成功，将用户信息保存在本地，然后跳转到主界面。
  
  4. 在主界面中，显示用户的基本信息，包括用户名、头像等。
  
  5. 创建退出登录按钮，在点击事件中清除本地保存的用户信息，然后跳转到登录界面。
  
  下面是示例代码：
  
  1. 登录界面代码：
  
  

  
  1.  
      
  2.  
     <template>
  3.  
     <div class="login">
  4.  
     <input type="text" v-model="username" placeholder="请输入用户名">
  5.  
     <input type="password" v-model="password" placeholder="请输入密码">
  6.  
     <button @click="login">登录</button>
  7.  
     </div>
  8.  
     </template>
  9.  
      
  10.  
      <script>
  11.  
      export default {
  12.  
      data() {
  13.  
      return {
  14.  
      username: '',
  15.  
      password: ''
  16.  
      }
  17.  
      },
  18.  
      methods: {
  19.  
      login() {
  20.  
      // 发送登录请求
  21.  
      // 验证成功后，保存用户信息到本地，然后跳转到主界面
  22.  
      uni.setStorageSync('userInfo', { username: this.username })
  23.  
      uni.switchTab({ url: '/pages/home/home' })
  24.  
      }
  25.  
      }
  26.  
      }
  27.  
      </script>
  

  2. 主界面代码：
  
  
  

  1.  
      
  2.  
     <template>
  3.  
     <div class="home">
  4.  
     <div class="userInfo">
  5.  
     <img :src="userInfo.avatar" alt="">
  6.  
     <span>{{ userInfo.username }}</span>
  7.  
     </div>
  8.  
     <button @click="logout">退出登录</button>
  9.  
     </div>
  10.  
      </template>
  11.  
       
  12.  
      <script>
  13.  
      export default {
  14.  
      data() {
  15.  
      return {
  16.  
      userInfo: {}
  17.  
      }
  18.  
      },
  19.  
      onShow() {
  20.  
      // 获取本地保存的用户信息
  21.  
      this.userInfo = uni.getStorageSync('userInfo')
  22.  
      },
  23.  
      methods: {
  24.  
      logout() {
  25.  
      // 清除本地保存的用户信息，然后跳转到登录界面
  26.  
      uni.removeStorageSync('userInfo')
  27.  
      uni.reLaunch({ url: '/pages/login/login' })
  28.  
      }
  29.  
      }
  30.  
      }
  31.  
      </script>
  

  在以上代码中，我们使用了uniapp提供的uni.setStorageSync()和uni.getStorageSync()方法来保存和获取本地数据，使用uni.switchTab()和uni.reLaunch()方法来跳转到其他页面。

这篇好文章是转载于：学新通技术网