登录退出初步完善

src/pages/login/index.vue

@@ -3,7 +3,7 @@
     <view class="login">
         <uni-forms :modelValue="loginForm" label-position="top" class="login-form">
             <h1>用户登录</h1>
-            <uni-forms-item label="用户名">
+            <uni-forms-item required label="用户名">
                 <uni-easyinput v-model="loginForm.username" placeholder="请输入用户名" />
             </uni-forms-item>
             <uni-forms-item required label="密码">
@@ -27,27 +27,27 @@ const memberStore = useMemberStore()
 
 // 登录参数
 const loginForm = reactive({
-    username: '',
+    username: uni.getStorageSync('username'),
-    password: '',
+    password: uni.getStorageSync('password'),
     loginType: 'USERNAME_PASSWORD',
     code: '',
     phoneUuid: '',
     uuid: '',
     verificationCode: '',
 })
+
 // 登录按钮
 const onHandleLogin = async () => {
     const res = await appLoginAPI(loginForm)
     if (res.code === 200) {
-        uni.showToast({ title: '登录成功', icon: 'none' })
+        // 1.  获取 token 并存储
-        // 获取 token 并存储
         memberStore.setToken(res.data.access_token)
-
+        // 2 . 获取用户信息并存储
-        // 获取用户信息并存储
         const result = await getUserInfoAPI()
         memberStore.setUserInfo(result.user)
-
         uni.showToast({ title: '登录成功！', icon: 'none' })
+        uni.setStorageSync('username', loginForm.username)
+        uni.setStorageSync('password', loginForm.password)
         setTimeout(() => {
             uni.switchTab({
                 url: '/pages/index/index',
@@ -64,14 +64,15 @@ const onHandleLogin = async () => {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #ccc;
+    background-color: #dcf4ff;
 
     .login-form {
         width: 90%;
         padding: 15rpx;
-        border: 1px solid #333;
+        border: 1px solid #eee;
         background-color: #fff;
         border-radius: 16rpx;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 
         h1 {
             text-align: center;

src/pages/my/index.vue

@@ -1,14 +1,19 @@
 <template>
     <view class="content">
-        <view class="btn-common" @tap="onExit"> 退出登录 </view>
+        <view class="user-info"> 用户： {{ userInfo.nickName }} </view>
+        <view class="user-info"> 用户： {{ userInfo.userName }} </view>
+        <view class="user-info"> 手机号：{{ userInfo.phonenumber || '13655555' }} </view>
+        <view class="user-info exit-btn" @tap="onExit"> 退出登录 </view>
     </view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { useMemberStore } from '@/stores'
 const memberStore = useMemberStore()
 
+const userInfo = memberStore.userInfo || reactive({})
+
 const onExit = () => {
     // 清除token 和用户信息 并返回登录页
     memberStore.clearUserInfo()
@@ -17,4 +22,22 @@ const onExit = () => {
 }
 </script>
 
-<style></style>
+<style scoped>
+.user-info {
+    width: 95%;
+    margin: 15rpx auto;
+    padding: 15rpx 10rpx;
+    font-size: 34rpx;
+    background-color: #e9f1f5;
+    box-sizing: content-box;
+    border-radius: 10rpx;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.exit-btn {
+    font-size: 30rpx;
+    background-color: #1989fa;
+    color: #fff;
+    text-align: center;
+}
+</style>

src/stores/modules/member.js

@@ -28,6 +28,7 @@ export const useMemberStore = defineStore(
 
         return {
             userInfo,
+            token,
             setUserInfo,
             clearUserInfo,
             setToken,

src/utils/http.js

@@ -5,7 +5,8 @@ import { useMemberStore } from '@/stores'
  *  拦截 request 请求
  *  baseURL 设置请求ip地址和端口
  */
-const baseURL = 'http://192.168.2.246:18080'
+const ENV = process.env.NODE_ENV
+const baseURL = ENV === 'development' ? 'http://192.168.2.246:18080' : '***'
 
 /**
  * httpInterceptor 分别拦截 request 和 uploadFile 请求
@@ -31,6 +32,8 @@ const httpInterceptor = {
         // 4. 增加 token 请求头标识
         const memberStore = useMemberStore()
         const token = memberStore.token
+
+        console.log('token---', token)
         // const token = "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjQ2NDdmYjlkLWI5OTItNDRiNy05MTdkLTMwZjg0ZjUxYzM5MCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.9xM5bFhrmHK09-4ZgL5SS8WraNIJjIijuB-1P0lJF-n0KlVM5Bglvyjltk1NQbdqgi1hwRocZS1OU41cLiwuig"
         if (token) {
             options.header.Authorization = token
@@ -54,25 +57,26 @@ export const http = (options) => {
                     // 2. 401 表示token过期 去往登录页重新登录
                     const memberStore = useMemberStore()
                     memberStore.clearUserInfo()
+                    memberStore.clearToken()
                     uni.navigateTo({
                         url: '/pages/login/index',
                     })
                     reject(res)
                 } else {
                     // 3. 其他错误
-                    // uni.showToast({
+                    uni.showToast({
-                    //     icon: 'none',
+                        icon: 'none',
-                    //     title: '请求错误',
+                        title: '请求错误',
-                    // })
+                    })
                     reject(res)
                 }
-                console.log(res)
+                // console.log(res)
             },
             fail(err) {
-                // uni.showToast({
+                uni.showToast({
-                //     icon: 'none',
+                    icon: 'none',
-                //     title: err,
+                    title: err,
-                // })
+                })
                 console.log(err, '请求失败')
                 reject(err)
             },