uniapp 로그인 점프 페이지

<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>

import request from '@/utils/request'

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

<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>

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'
    })
  }
}