一、登录基础

1. 登录组件

对于 登录 功能来说提供了两个登录的入口。

那么大家想一下，现在我们已经在 我的 这个 tab页 中实现了 登录的 UI，难道我还需要在另外一个页面中再去实现一遍吗？

这个肯定是不需要的对不对。所以我们希望可以复用登录的 UI，而复用的方式则可以把 登录的 UI 封装称为一个 组件

创建登录组件 my-login

登录页面基本样式

<template><view class="my-container"><!-- 用户未登录 --><block><image class="avatar avatar-img" src="/static/images/default-avatar.png" mode="scaleToFill" /><view class="login-desc">登录后可同步数据</view><button class="login-btn" type="primary" @click="getUserInfo">微信用户一键登录</button></block></view>
</template><script>
export default {name: 'my-login',data() {return {};}
};
</script><style lang="scss" scoped>
.my-container {display: flex;flex-direction: column;align-items: center;padding-top: 25%;.avatar-img {width: 78px;height: 78px;}.login-desc {color: $uni-text-color-grey;font-size: $uni-font-size-base;margin-top: $uni-spacing-col-big;}.login-btn {margin-top: $uni-spacing-col-big;width: 85%;}
}
</style>

2. 页面引用组件

me.vue

<template><my-login />
</template><script>
export default {name: 'login'
};
</script>

3. 明确登录的实现思路

微信小程序：

1. 想要实现登录功能，那么我们需要调用登录接口来进行实现，而登录接口所需要的参数，我们可以直接通过 getUserProfile 方法进行获取。
2. 调用登录接口成功，服务端会返回用户的 token，这个 token 为当前的用户身份令牌。（拥有 token） 则表示用户已经登录了。
3. 而此处的 token，我们需要在多个组件中进行使用，所以 token 需要被保存到 全局状态管理工具 - vuex 中，同时需要保存的还有通过 getUserProfile 获取到的用户基本信息。
4. 而当前的用户登录状态，我们希望可以一直保存（PS：不需要每次都进行登录）。所以在登录完成后，我们需要把 token && userinfo 保存到 本地存储中
5. 最后，为了实现 数据与组件的分离，我们需要把与 与登录相关的逻辑 都封装在 vuex 中进行。

这些业务是 前端用户登录的标准逻辑，大家在以后的前端登录业务处理中，也可以按照此逻辑进行。

4. 封装 action 调用登录接口

首先我们需要先获取到用户的信息，用作登录时的请求参数：
my-login

<script>
import { mapActions } from 'vuex';
export default {methods: {...mapActions('user', ['login']),/*** 获取用户信息*/getUserInfo() {// 展示加载框uni.showLoading({title: '加载中'});uni.getUserProfile({desc: '登录后可同步数据',success: async (obj) => {// 调用 action ，请求登录接口await this.login(obj);},fail: () => {uni.showToast({title: '授权已取消',icon: 'error',mask: true});},complete: () => {// 隐藏loadinguni.hideLoading();}});}}
};
</script>

api/user.js

import request from '../utils/request';/*** 获取用户基本信息*/
export function login(data) {return request({url: '/sys/login',method: 'POST',data,});
}/*** 微信用户授权登录，携带appid和code参数，调用后端接口获取Openid*/
export function loginAuth(data) {return request({url: '/wx/user/' + data.appid + '/login/',data: {code: data.code,},});
}

store/user.js

import { login } from 'api/user';
export default {namespaced: true,state: () => {return {};},actions: {/*** 完成登录*/async login(context, userProfile) {console.log(userProfile);// 用户数据const rawData = userProfile.userInfo;// 调用登录接口const { data: res } = await login({signature: userProfile.signature,iv: userProfile.iv,nickName: rawData.nickName,gender: rawData.gender,city: rawData.city,province: rawData.province,avatarUrl: rawData.avatarUrl});// TODO: 登录逻辑console.log(res);}}
};

store/index.js

import user from './modules/user';const store = new Vuex.Store({modules: {user}
});

5. 保存用户登录状态

用户的登录状态需要被保存到 vuex 中，同时需要进行 本地存储。

store/user.js

import { login } from 'api/user';
const STORAGE_KEY = 'user-info';
const TOKEN_KEY = 'token';
export default {namespaced: true,state: () => {return {// 用户 tokentoken: uni.getStorageSync(TOKEN_KEY) || '',// 用户信息userInfo: uni.getStorageSync(STORAGE_KEY) || {}};},mutations: {/*** 保存 token 到 vuex*/setToken(state, token) {state.token = token;this.commit('user/saveToken');},/*** 保存 token 到 本地存储*/saveToken(state) {uni.setStorage({key: TOKEN_KEY,data: state.token});},/*** 保存 用户信息 到 vuex*/setUserInfo(state, userInfo) {state.userInfo = userInfo;this.commit('user/saveUserInfo');},/*** 保存 用户信息 到 本地存储*/saveUserInfo(state) {uni.setStorage({key: STORAGE_KEY,data: state.userInfo});}},actions: {/*** 完成登录*/async login(context, userProfile) {...// 登录逻辑this.commit('user/setToken', res.token);this.commit('user/setUserInfo', JSON.parse(userProfile.rawData));}}
};

6. 成已登录的用户视图

当 token 存在时，表示用户已经登录了，此时需要 展示用户登录完成的视图：

my-login

<template><view class="my-container"><!-- 用户未登录 --><block v-if="!token">...</block><!-- 已登录 --><block v-else><image class="avatar avatar-img" :src="userInfo.avatarUrl" mode="scaleToFill" /><view class="login-desc">{{ userInfo.nickName }}</view><button class="login-btn" type="default" @click="onLogoutClick">退出登录</button></block></view>
</template><script>
import { mapState, mapActions } from 'vuex';
export default {name: 'my-login',data() {return {};},computed: {...mapState('user', ['token', 'userInfo'])},
};
</script>

6. 现退出登录功能

store/user

export default {...mutations: {.../*** 删除 token*/removeToken(state) {state.token = '';this.commit('user/saveToken');},.../*** 删除用户信息*/removeUserInfo(state) {state.userInfo = {};this.commit('user/saveUserInfo');}},actions: {.../*** 退出登录*/logout(context) {this.commit('user/removeToken');this.commit('user/removeUserInfo');}}
};

my-login

<template><view class="my-container">...<!-- 已登录 --><block v-else>...<button class="login-btn" type="default" @click="onLogoutClick">退出登录</button></block></view>
</template><script>
export default {...methods: {...mapActions('user', ['login', 'logout']),.../*** 退出登录*/onLogoutClick() {uni.showModal({title: '提示',content: '退出登录将无法同步数据哦~',success: ({ confirm, cancel }) => {if (confirm) {this.logout();}}});}}
};
</script>