文章目錄

• • • • • 一、登錄基礎
        • • 1. 登錄組件
          • 2. 頁面引用組件
          • 3. 明確登錄的實現思路
          • 4. 封裝 action 調用登錄接口
          • 5. 保存用戶登錄狀態
          • 6. 成已登錄的用戶視圖
          • 6. 現退出登錄功能

一、登錄基礎

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. 明確登錄的實現思路

微信小程序：

想要實現登錄功能，那么我們需要調用登錄接口來進行實現，而登錄接口所需要的參數，我們可以直接通過 getUserProfile 方法進行獲取。

調用登錄接口成功，服務端會返回用戶的 token，這個 token 為當前的用戶身份令牌。（擁有 token） 則表示用戶已經登錄了。

而此處的 token，我們需要在多個組件中進行使用，所以 token 需要被保存到 全局狀態管理工具 - vuex 中，同時需要保存的還有通過 getUserProfile 獲取到的用戶基本信息。

而當前的用戶登錄狀態，我們希望可以一直保存（PS：不需要每次都進行登錄）。所以在登錄完成后，我們需要把 token && userinfo 保存到 本地存儲中

最后，為了實現 數據與組件的分離，我們需要把與 與登錄相關的邏輯 都封裝在 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>

總結

以上是生活随笔為你收集整理的uniapp 用户登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。