如何在uniapp中实现登录功能

在当前移动端APP开发的背景下，登录功能是一个极其基础的常见功能。很多uniapp的开发者都会碰到如何在uniapp中实现登录功能的问题。本篇文章将分享如何使用uniapp实现一般性的登录功能。具体来说，将涉及到uniapp中使用模态框进行用户输入，以及使用vuex进行状态管理。在文章的最后还将简单介绍如何在uniapp中实现sessionStorage和setStorageSync功能。最后附上代码实例供读者参考。

1.初始化uniapp项目

在开始实现登录功能之前，我们需要初始化一个uniapp项目。下面是命令行中初始化uniapp项目的代码：

npm install -g @vue/cli-service-global

vue create -p dcloudio/uni-preset-vue my-project

2.创建登录页面

首先，我们需要新建一个登录页面，页面中包括两个输入框和一个登录按钮。在此基础上，我们使用uni-app的模态框组件对输入框进行封装，这样可以方便地获取用户的输入信息。代码如下：

//login.vue

<template>
  <view class="container">
    <view class="login-form">
      <input-box :placeholder="'请输入用户名'" :value.sync="username" @click.native="showInput('username')" />
      <input-box :placeholder="'请输入密码'" :value.sync="password" :password="true" @click.native="showInput('password')" />
    </view>
    <uni-button class="login-btn" @click="doLogin">登 录</uni-button>
    <uni-input :placeholder="inputTitle" v-model="inputContent" :focus="focus" @confirm="confirmInput"></uni-input>
  </view>
</template>
<script>
import InputBox from '@/components/input-box.vue';
import { mapActions } from 'vuex';
export default {
  data() {
    return {
      username: '',
      password: '',
      inputTitle: '请输入用户名',
      inputContent: '',
      focus: false
    }
  },
  components: {
    InputBox
  },
  methods: {
    ...mapActions(['login']),
    showInput(type) {
      if (type === 'username') {
        this.inputTitle = '请输入用户名';
        this.inputContent = this.username;
      } else if (type === 'password') {
        this.inputTitle = '请输入密码';
        this.inputContent = this.password;
      }
      this.focus = true;
    },
    confirmInput() {
      if (this.inputTitle == '请输入用户名') {
        this.username = this.inputContent;
      } else if (this.inputTitle === '请输入密码') {
        this.password = this.inputContent;
      }
    },
    async doLogin() {
      if (!this.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return;
      }
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return;
      }
      try {
        const res = await this.login({
          username: this.username,
          password: this.password
        });
        if (res) {
          uni.setStorageSync('userInfo', res);
          uni.reLaunch({
            url: '/pages/index/index'
          });
        } else {
          uni.showToast({
            title: '登录失败，请重试！',
            icon: 'none'
          });
        }
      } catch (error) {
        console.log(error);
        uni.showToast({
          title: '登录失败，请重试！',
          icon: 'none'
        });
      }
    }
  }
}
</script>

3.使用VUEX管理登录状态

在uniapp中尽量使用vuex对状态进行管理，将数据分离出来，减少对HTML中的数据操作和改变数据的副作用。这里我们使用vuex管理登录状态。如果登录成功，我们使用vuex存储登录态，这样就可以在其他页面中共享用户信息。在实际开发中，我们可以在vuex的store中管理登录状态。代码如下：

//store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    userInfo: {}
  },
  mutations: {
    setUserInfo(state, payload) {
      state.userInfo = payload;
    }
  },
  actions: {
    async login({ commit }, req) {
      // 登录逻辑
    }
  },
  modules: {}
});

4.使用sessionStorage以及setStorageSync存储用户信息

在uniapp中，我们使用uni-app的内置api进行存储。在本例中，我们使用sessionStorage实现对用户信息的添加删除和修改。我们在登录成功的时候，调用uni.setStorageSync('userInfo', res);保存用户信息。代码如下：

async doLogin() {
  if (!this.username) {
    uni.showToast({
      title: '请输入用户名',
      icon: 'none'
    });
    return;
  }
  if (!this.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    });
    return;
  }
  try {
    const res = await this.login({
      username: this.username,
      password: this.password
    });
    if (res) {
      uni.setStorageSync('userInfo', res);
      uni.reLaunch({
        url: '/pages/index/index'
      });
    } else {
      uni.showToast({
        title: '登录失败，请重试！',
        icon: 'none'
      });
    }
  } catch (error) {
    console.log(error);
    uni.showToast({
      title: '登录失败，请重试！',
      icon: 'none'
    });
  }
}

将用户信息存储在sessionStorage中的好处是用户刷新页面后登录态依然有效，在整个会话中保证用户信息的持续性。另外，我们还可以使用setStorageSync记录用户操作，如下代码：

//logout.js
export function logout() {
  uni.setStorageSync('isLogin', false);
  uni.setStorageSync('userInfo', {});
  uni.reLaunch({
    url: '/pages/index/index'
  });
}

我们可以使用uni.getStorageSync('key')来获取本地内存中的数据。同样的，我们可以使用uni.removeStorage删除本地内存中的某条信息，如下：

uni.removeStorage({
  key: 'userInfo',
  success: function (res) {
    console.log(res.data);
  }
});

结语

在本文中，我们简单介绍了如何使用uniapp实现登录功能，以及使用vuex管理登录状态，使用sessionStorage和setStorageSync存储用户信息。 在实际开发中，还需要根据业务做相应的修改，增加对用户信息的合法性、完整性、唯一性等校验，实现更为完整的功能。下面的代码可以作为本文的最终完整代码供读者参考，需要读者仔细考察本文的思路，然后运用到自己的业务中。

//store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    userInfo: {}
  },
  mutations: {
    setUserInfo(state, payload) {
      state.userInfo = payload;
    }
  },
  actions: {
    async login({ commit }, req) {
      //此处省略登录逻辑
    }
  },
  modules: {}
});
//login.vue
<template>
    <view class="container">
        <view class="login-form">
            <input-box :placeholder="'请输入用户名'" :value.sync="username" @click.native="showInput('username')" />
            <input-box :placeholder="'请输入密码'" :value.sync="password" :password="true" @click.native="showInput('password')" />
        </view>
        <uni-button class="login-btn" @click="doLogin">登 录</uni-button>
        <uni-input :placeholder="inputTitle" v-model="inputContent" :focus="focus" @confirm="confirmInput"></uni-input>
    </view>
</template>
<script>
    import InputBox from '@/components/input-box.vue';
    import { mapActions } from 'vuex';
    export default {
        data() {
            return {
                username: '',
                password: '',
                inputTitle: '请输入用户名',
                inputContent: '',
                focus: false
            }
        },
        components: {
            InputBox
        },
        methods: {
            ...mapActions(['login']),
            showInput(type) {
                if (type === 'username') {
                    this.inputTitle = '请输入用户名';
                    this.inputContent = this.username;
                } else if (type === 'password') {
                    this.inputTitle = '请输入密码';
                    this.inputContent = this.password;
                }
                this.focus = true;
            },
            confirmInput() {
                if (this.inputTitle == '请输入用户名') {
                    this.username = this.inputContent;
                } else if (this.inputTitle === '请输入密码') {
                    this.password = this.inputContent;
                }
            },
            async doLogin() {
                if (!this.username) {
                    uni.showToast({
                        title: '请输入用户名',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.password) {
                    uni.showToast({
                        title: '请输入密码',
                        icon: 'none'
                    });
                    return;
                }
                try {
                    const res = await this.login({
                        username: this.username,
                        password: this.password
                    });
                    if (res) {
                        uni.setStorageSync('userInfo', res);
                        uni.reLaunch({
                            url: '/pages/index/index'
                        });
                    } else {
                        uni.showToast({
                            title: '登录失败，请重试！',
                            icon: 'none'
                        });
                    }
                } catch (error) {
                    console.log(error);
                    uni.showToast({
                        title: '登录失败，请重试！',
                        icon: 'none'
                    });
                }
            }
        }
    }
</script>
//logout.js
export function logout() {
    uni.setStorageSync('isLogin', false);
    uni.setStorageSync('userInfo', {});
    uni.reLaunch({
        url: '/pages/index/index'
    });
}