Vue3+Vant开发：个人信息管理

发布于：2024-04-19 ⋅ 阅读:(15) ⋅ 点赞:(0)

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：程序员老茶
🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

目录

课程名：Java

内容/作用：知识点/设计/实验/作业/练习

学习：Java

这里，我们主要实现个人信息的展示，以及实现个人信息管理的页面布局实现

1、TabBar处理

在个人信息管理页面的底部，我们发现有一组“标签导航栏”。

而且这一组“标签导航栏”在每个页面中都有。

那么我们应该怎样处理呢？
第一种方案：在每个页面中都创建一遍，但是这种做法比较麻烦，所以不建议这样做。

第二种方案：将其单独的封装成一个 组件，这样每个页面中需要标签导航栏的时候，直接使用该组件就可以了。但是，这里我们也不建议这样做，因为，当我们切换到不同的页面的时候，这个组件都会重新被渲染加载，这样就会影响性能。

第三种方式：我们做一个父路由，把底部的标签导航栏放在父路由中，同时在父路由中留一个路由的出口。对应的其它页面都都渲染到这个路由出口的位置。这样，当我们进行页面的切换的时候，就不需要重新加载底部的“导航栏”了

在views目录下面创建layout目前，同时在该目录下面创建index.vue文件，该文件中的代码如下所示：

在下面代码中，先来指定子路由的出口，后面在对标签导航栏进行设置

<template>
  <div class="layout-container">
    <!-- 子路由的出口 -->
    <router-view></router-view>
    <!-- 标签导航栏 -->
  </div>
</template>

<script>
export default {};
</script>

<style></style>

配置路由规则：

const routes = [
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login/index.vue"),
  },
  { //配置路由
    path: "/",
    name: "layout",
    component: () => import("../views/layout/index.vue"),
  },
];

下面，我们返回到index.vue页面，开始制作底部的标签导航栏

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tabbar

<template>
  <div class="layout-container">
    <!-- 子路由的出口 -->
    <router-view></router-view>
    <!-- 标签导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const active = ref(0);
    return {
      active,
    };
  },
};
</script>

<style></style>

在上面的代码中，我们直接把官方文档中的tabbar组件，拿过来了。v-model的取值为active,而active这个对象的默认值为0，也就是让人第一项导航栏进行选中。icon属性表示的就是导航栏中每一项的图标，下面把文字修改一下：

   <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">问答</van-tabbar-item>
      <van-tabbar-item icon="friends-o">视频</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>

下面把视频与我的图标更换一下：

<van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">问答</van-tabbar-item>
      <van-tabbar-item icon="video-o">视频</van-tabbar-item>
      <van-tabbar-item icon="contact">我的</van-tabbar-item>
    </van-tabbar>

这里我们还是使用的vant中提供好的一些图标，当然这里我们也可以使用自定义图标，在官方文档中也已经明确的告诉我们怎样使用自定义图标了。

下面，我们要实现的就是，单击不同的项，展示出各自对应的页面。

首先在views目录中，创建对应的文件夹与文件。

创建home文件夹，在该文件夹中创建index.vue文件,表示首页，该文件的初步内容为：

<template>
  <div>Home Page</div>
</template>

<script>
export default {};
</script>

<style></style>

my/index.vue

<template>
  <div>我 的</div>
</template>

<script>
export default {};
</script>

<style></style>

video/index.vue

<template>
  <div>视频</div>
</template>

<script>
export default {};
</script>

<style></style>

qa/index.vue

<template>
  <div>问答</div>
</template>

<script>
export default {};
</script>

<style></style>

初步的页面创建好以后，下面需要配置对应的子路由了。router/index.js设置路由

{
    path: "/",
    name: "layout",
    component: () => import("../views/layout/index.vue"),
    children: [
      {
        path: "", //默认子路由(默认展示home页面)，只能有一个
        name: "home",
        component: () => import("../views/home/index.vue"),
      },
      {
        path: "/qa",
        name: "qa",
        component: () => import("../views/qa/index.vue"),
      },
      {
        path: "/video",
        name: "video",
        component: () => import("../views/video/index.vue"),
      },
      {
        path: "/my",
        name: "my",
        component: () => import("../views/my/index.vue"),
      },
    ],
  },

在值的路由中，最开始设置了默认子路由。

下面返回到浏览器中，进行测试，发现默认展示的就是home组件中的内容，但是当我们单击tabbar中的每一项的时候，还没有进行切换。

原因是，这里我们需要给tabbar开启路由功能。

返回到views/layout/index.vue页面中。

  <van-tabbar route v-model="active">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/qa">问答</van-tabbar-item>
      <van-tabbar-item icon="video-o" to="/video">视频</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/my">我的</van-tabbar-item>
    </van-tabbar>

第一步：给tabber组件添加了route属性，表示开启了路由的模式

第二步：给每个tabbar-item添加了to属性，指定了对应的路由地址、

这时候，可以发现浏览器进行测试。

2、未登录布局实现

下面修改views/my/index.vue文件中的代码，代码如下所示：

<template>
  <div class="my-container">
    <div class="header not-login">
      <div class="login-btn" @click="this.$router.push('/login')">
        <img class="mobile-img" src="../../assets/mobile.png" alt="" />
        <span class="text">注册 / 登录</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.my-container .header {
    height: 361px; 
  
  background: url("../../assets/banner.png");
  background-size: cover;
}
.my-container .not-login { /* 没有登录的效果样式*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-container .not-login .login-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mobile-img {
  width: 132px;
  height: 132px;
  margin-bottom: 15px;
}
.text {
  font-size: 28px;
  color: #fff;
}
</style>

在上面的代码中，设置了基本的布局和对应的css样式。

到单击图标的时候，跳转到登录页面。

但是，这里当我们单击了图标，跳转到登录页面以后，又不想登录了，想返回上一页。

下面，返回到/login/index.vue文件

 <!-- 导航栏 -->
    <van-nav-bar title="登录" class="page-nav-bar">
      <template #left>
        <van-icon name="cross" size="18" />
      </template>
    </van-nav-bar>

在导航栏中，使用了插槽，定义左侧的图标，为cross图标。

这里参考文档实现：

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/nav-bar

当在浏览器中展示的时候，发现cross图标的颜色与背景色基本上是一致的，所以看不清楚。

这里我们可以修改一下图标的颜色。

在styles/index.css文件中定义的是全局的样式，在这里给图标添加对应的样式：

.page-nav-bar {
  background-color: #3296fa;
}
.page-nav-bar .van-nav-bar__title {
  color: #fff;
} 
/* 图标的样式*/
.page-nav-bar .van-icon { 
  color: #fff;
}

下面实现当单击cross图标的时候，进行返回的操作：

<van-nav-bar title="登录" class="page-nav-bar">
      <template #left>
        <van-icon name="cross" size="18" @click="this.$router.back()" />
      </template>
    </van-nav-bar>

这里通过$router.back方法进行返回操作。

3、已登录布局实现

在模板中，增加了登录后的布局

<template>
  <div class="my-container">
    <!-- 未登录布局 -->
    <div class="header not-login">
      <div class="login-btn" @click="this.$router.push('/login')">
        <img class="mobile-img" src="../../assets/mobile.png" alt="" />
        <span class="text">注册 / 登录</span>
      </div>
    </div>
    <!-- 登录后的布局 -->
    <div class="header user-info">
      <div class="base-info">
        <div class="left">
          <van-image
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            class="avatar"
            round
            fit="cover"
          ></van-image>
          <span class="name">博学谷头条号</span>
        </div>
        <div class="right">
          <van-button size="mini" round>编辑资料</van-button>
        </div>
      </div>
      <div class="data-stats">
        <div class="data-item">
          <span class="count">10</span>
          <span class="text">头条</span>
        </div>
        <div class="data-item">
          <span class="count">10</span>
          <span class="text">关注</span>
        </div>
        <div class="data-item">
          <span class="count">10</span>
          <span class="text">粉丝</span>
        </div>
        <div class="data-item">
          <span class="count">10</span>
          <span class="text">获赞</span>
        </div>
      </div>
    </div>
  </div>
</template>

对应的css样式

.user-info .base-info {
  height: 231px;
  padding: 70px 32px 23px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-info .left {
  display: flex;
  align-items: center;
}
.user-info .left .avatar {
  width: 132px;
  height: 132px;
  margin-right: 13px;
  border: 1px solid #fff;
}
.user-info .left .name {
  font-size: 16px;
  color: #fff;
}
.user-info .data-stats {
  /* background-color: #ccc; */
  display: flex;
  /* height: 130px; */
}
.user-info .data-stats .data-item {
  height: 130px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.user-info .data-stats .count {
  font-size: 36px;
}
.user-info .data-stats .text {
  font-size: 23px;
}

4、宫格导航布局

这块内容与上一小节的布局基本上一样的，所以这里可以采用自定义样式的方式来实现布局

但是这里我们主要是通过Vant中的Grid宫格组件来完成。

在"登录布局"后面实现宫格布局。这里把Grid组件基本使用的代码拷贝过来，测试一下：

<!-- 导航 -->
    <van-grid>
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

这里可以测试，看一下效果。

<!-- 导航 -->
    <van-grid :column-num="2">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

这里我们只保留两项内容，同时我们希望这两项内容平分这一行，所以这里指定了column-num这个属性。该属性的作用就是：自定义列数。这里指定是两列。

下面，我们换一下文字与图标：

<van-grid :column-num="2" clickable>
      <van-grid-item icon="star-o" text="收藏" />
      <van-grid-item icon="clock-o" text="历史" />
    </van-grid>

指定了icon和text两个属性的值。

指定了样式：

.van-grid-item__icon {
  color: #eb5253;
}
.van-grid-item__text {
  font-size: 14px;
}

同时给van-grid添加了clickable属性，该属性的作用： 是否开启格子点击反馈.

这里可以看一下效果。

关于单击后，跳转到其它的页面，我们后面实现。

5、消息通知与退出登录布局

这里，我们使用cell这个单元格组件来完成布局。

  <van-cell title="消息通知" is-link />
    <van-cell title="小智同学" is-link />
    <van-cell title="退出登录" />

修改了title属性的取值，取消了其它无关的属性。同时添加了is-link属性，添加了该属性以后会在右侧出现箭头。

下面给退出登录添加对应的样式

<van-cell title="退出登录" class="logout-cell" />

对应的css样式。

.logout-cell {
  text-align: center;
  color: #d86262;
    margin-top: 9px;
     height: 120px;
}

6、处理页面显示状态

现在关于个人中心页面的整个结构的布局已经完成了，下面来实现对应的功能状态。

下面我们要获取到用户的登录信息，如果能够获取到展示的是图片以及博学谷头条这块内容，否则展示的是登录/注册这块内容。

我们可以从vuex容器中获取对应的用户信息。

下面修改views/my/index.vue文件中的代码

<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const userState = computed(() => store.state.user);
    return {
      userState,
    };
  },
};
</script>

导入computed计算属性，从vuex中导入useStore。在setup函数中通过useStore获取store容器，然后从容器中获取user登录用户的信息。最终返回。

在模板中就可以进行判断

 <!-- 未登录布局 -->
    <div v-if="!userState" class="header not-login">
         <!-- 登录后的布局 -->
    <div v-else class="header user-info">

注意的是：退出按钮也是在用户登录以后才会展示出来。

 <van-cell v-if="userState" title="退出登录" class="logout-cell" />

下面可以进行测试，查看一下效果。

测试完成以后，还有一个问题需要处理一下，就是底部导航栏中的我的，如果是没有登录，这里让这一项显示“未登录”

下面返回到/layout/index.vue文件中，修改一下代码

import { ref, computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const active = ref(0);
    const store = useStore();
    const userState = computed(() => store.state.user);
    return {
      active,
      userState,
    };
  },
};

对应模板中的代码修改：

 <van-tabbar-item icon="contact" to="/my">{{
        userState ? "我的" : "未登录"
      }}</van-tabbar-item>

现在，我们可以返回到浏览器端把localStoreage中的数据删除掉，查看一下对应的效果。

当我们重新登录以后，应该返回到原来的页面。

这里，我们在views/login/index.vue文件中。导入以前构建好的路由对象。

import { useStore } from "vuex";
import router from "../../router";

然后在登录成功以后返回到原来的页面

if (res.data.code === 0) {
      store.commit("setUser", res.data);
      Toast.success("用户登录成功");
      router.back(); //返回到原来的页面，这种写法不是很严禁，后面再来强调另外一种写法。
    // router.push("/my");
    } else {
      Toast.fail("用户名或密码错误");
    }

下面可以返回到浏览器中进行演示.

7、退出登录

当单击退出登录按钮的时候，完成用户的退出，这时展示的页面还是当前页面，但是展示的信息为：注册/登录，同时不在展示退出登录这个按钮。

首先给退出登录添加单击事件

 <van-cell
      v-if="userState"
      title="退出登录"
      class="logout-cell"
      @click="onLogout"
    />

onLogout函数的定义如下所示：

import { computed } from "vue";
import { useStore } from "vuex";
import { Dialog } from "vant";
function useLogout() {
  const onLogout = () => {
    //1、退出提示
    Dialog.confirm({
      title: "确认退出吗？",
    })
      .then(() => {
        // on confirm
        console.log("确认执行这里");
      })
      .catch(() => {
        // on cancel
        console.log("取消执行这里");
      });
    //2、确认退出：清除登录状态（Vuex容器中的用户数据和本地存储中的用户数据）
  };
  return { onLogout };
}

在useLogout方法中返回了onLogout函数，在onLogout函数中，主要做两件事情：

第一：给出退出登录的提示

第二：当确认退出后，要清除登录状态。

在上面的代码中我们使用Dialog组件，给出相应的退出提示，所以这里先导入Dialog组件。

关于该组件可以参数官网：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/dialog

在这里我们选择的是“消息确认”这个效果，大家可以根据需要选择其他的效果。

在这里还要注意，在setup函数中要调用useLogout函数，并且进行解构返回。这样在模板中才能够使用onLogout

setup() {
    const store = useStore();
    const userState = computed(() => store.state.user);
    return {
      userState,
      ...useLogout(), //调用useLogout函数，并且对返回的结果进行解构
    };
  },

下面，我们要实现的是第二步：

清除登录状态。

 setup() {
    const store = useStore();
    const userState = computed(() => store.state.user);
    return {
      userState,
      ...useLogout(store),
    };
  },

在setup方法中，当调用useLogout方法的时候，传递store容器。

function useLogout(store) {
  const onLogout = () => {
    //1、退出提示
    Dialog.confirm({
      title: "确认退出吗？",
    })
      .then(() => {
        //2、确认退出：清除登录状态（Vuex容器中的用户数据和本地存储中的用户数据）
        store.commit("setUser", null);
      })
      .catch(() => {
        // on cancel
        console.log("取消执行这里");
      });
  };
  return { onLogout };
}·

在useLogout方法中接收传递过来的store容器，同时通过commit方法提交mutations，这里，对应的方法就是setUser方法，给该方法传递的值为null.

这样在store/index.js文件中的mutations中的setUser方法中，会将state.user的值设置为null,同时本地存储中的值也为null

这里可以进行测试。

8、展示当前登录用户信息

这里，我们需要获取登录用户完整的信息，例如：用户名，用户头像，发布文章数目，关注的数目，粉丝数目，被点赞数。

这里，需要发送一个新的请求来获取这些数据。

在src/api/user.js文件中，添加一个新的方法如下所示：

// 封装用户相关的请求模块
import request from "../utils/request";
import store from "../store"; //导入store
export const login = (data) => {
  return request({
    method: "POST",
    url: "/user/login",
    data,
  });
};
//获取用户自己完整的信息
export const getUserInfo = (id) => {
  return request({
    method: "GET",
    url: "/userInfo/get",
    params: { userId: id },
    headers: {
      Authorization: `Bearer ${store.state.user.myToken}`,
    },
  });
};

在上面的代码中，添加了getUserInfo方法，该方法根据传递过来的用户编号，发送一个get请求，目的就是根据用户编号查询对应的完整的信息。

在这里，需要注意的就是这里需要指定headers属性，该属性中的Authorization中存储的就是发送到服务端的token数据，token数据是从store容器中获取的。

现在返回到views/my/index.vue中调用getUserInfo方法来获取对应的数据。

import { Dialog } from "vant";
import { getUserInfo } from "../../api/user";

导入我们定义的getUserInfo这个方法。

在调用getUserInfo方法发送异步请求之前，定义了一个响应式对象state,该对象中的userInfo属性中存储的就是我们要获取的数据

注意：这里需要导入reactive函数。

在什么时候发送请求呢？

在onMounted钩子函数中发送异步请求。

但是，这里也需要注意一个细节：未登录的用户也可以访问当前的组件，但是这时候，没有必要发送异步请求

所以这里需要判断store容器中是否能够获取到登录用户信息，如果能够获取到，才可以发送异步请求，获取登录用户的完整信息，最终填充到userInfo中。最后将state对象的内容进行解构，然后通过toRefs函数将其包裹，这样解构的内容又被转换成响应式的了。注意：toRefs函数需要导入

import { computed, onMounted, reactive, toRefs } from "vue";
setup() {
    const store = useStore();
    const userState = computed(() => store.state.user);
    const state = reactive({
      userInfo: {
        userName: "", //用户名
        art_count: 0, //发布的文章数目
        follow_count: 0, //关注的数目
        fans_count: 0, //粉丝数目
        like_count: 0, //被点赞数目
      },
    });
    onMounted(() => {
      //登录以后，才加载对应的数据
      if (store.state.user) {
        loadUserInfo(state, store.state.user);
      }
    });
    return {
      ...toRefs(state),
      userState,
      ...useLogout(store),
    };
  },

请求的发送，需要调用loadUserInfo方法来完成，需要传递state以及store容器中的用户数据。

//加载用户信息数据
function loadUserInfo(state, userData) {
  // console.log("data=", userData.myToken);
  getUserInfo(userData.data.id).then((res) => {
    state.userInfo = res.data;
  });
}

在loadUserInfo方法中，调用了getUserInfo方法发送异步请求，获取完整用户数据，将其填充到state对象中的userInfo中。

下面修改模板中的内容：

  <span class="name">{{ userInfo.userName }}</span>
 <div class="data-item">
          <span class="count">{{ userInfo.art_count }}</span>
          <span class="text">头条</span>
        </div>
        <div class="data-item">
          <span class="count">{{ userInfo.follow_count }}</span>
          <span class="text">关注</span>
        </div>
        <div class="data-item">
          <span class="count">{{ userInfo.fans_count }}</span>
          <span class="text">粉丝</span>
        </div>
        <div class="data-item">
          <span class="count">{{ userInfo.like_count }}</span>
          <span class="text">获赞</span>
        </div>

这时候，可以返回浏览器进行查看。

9、用户头像处理

在上一小节中，我们并没有处理用户头像，这一小节我们单独来处理一下用户头像的问题

用户的头像是存储在服务端，而服务端返回的头像的路径中，并没有包好服务端的地址。

所以，我们在展示用户头像的时候，需要添加上服务端的地址

 <van-image
            :src="'http://localhost:3005' + userInfo.photo"
            class="avatar"
            round
            fit="cover"
          ></van-image>

在my.vue页面中的image组件中指定了图片的服务端地址。

同时，还需要在state对象中的userInfo中定义photo属性。

const state = reactive({
      userInfo: {
        userName: "",
        art_count: 0,
        follow_count: 0,
        fans_count: 0,
        like_count: 0,
        photo: "", //定义photo
      },
    });

这时返回到浏览器可以看到，图片已经展示出来了。

但是，这样写是有问题的。

问题是：项目在开发阶段与生产阶段请求的服务端的地址有可能是不一样的。这样导致后期还要修改服务端的请求地址，非常麻烦。

这里可以通过设置环境变量来解决。

Vite设置环境变量官方地址：

https://cn.vitejs.dev/guide/env-and-mode.html

在项目的根目录下面创建.env.development文件，表示在开发环境中使用的环境变量内容

内容为：

VITE_APP_URL='http://localhost:3005'

注意：前缀一定是VITE_（这里需要重新启动服务）

下面修改一下my.vue文件中的代码

const url = import.meta.env.VITE_APP_URL; //获取环境变量中的值
    onMounted(() => {
      //登录以后，才加载对应的数据
      if (store.state.user) {
        loadUserInfo(state, store.state.user);
      }
    });
    return {
      ...toRefs(state),
      userState,
      ...useLogout(store),
      url, //将其返回
    };
  },

模板中的应用：

 <van-image
            :src="`${url}` + userInfo.photo"
            class="avatar"
            round
            fit="cover"
          ></van-image>

这里使用了模板字符串，获取url属性中的值。

10、优化设置Token

我们在请求服务端的很多的接口的时候，都需要通过授权才能够访问。

而如果我们每次发送请求的时候，都写headers请求头，会比较麻烦。

  headers: {
      Authorization: `Bearer ${store.state.user.myToken}`,
    },

其实，这里我们可以通过axios的请求拦截器来完成处理。因为我们通过axios发送请求的时候，都会先去执行对应的axios的请求拦截器。在请求拦截器中，设置token数据，这样发送到服务端的数据中，就有了对应的token数据了。从而，不需要单独的在设置token数据了。

下面返回到utils/request.js文件，添加请求拦截器。

import axios from "axios";
import store from "../store";
const request = axios.create({
  baseURL: import.meta.env.VITE_APP_URL, //这里也从环境变量中获取服务端的地址
});
//请求拦截器
request.interceptors.request.use(
  function (config) {
    //请求发送会经过这里
    //config：本次请求的请求配置对象
    const user = store.state.user;
    if (user && user.myToken) {
      config.headers.Authorization = `Bearer ${user.myToken}`;
    }
    //注意：这里务必要返回config配置对象，否则请求就停在这里出不去了。
    return config;
  },
  function (err) {
    //如果请求出错了，会执行这里。
    return Promise.reject(err);
  }
);
//响应拦截器
export default request;

这里，将api/user.js文件中的请求头内容删除掉。

// 封装用户相关的请求模块
import request from "../utils/request";
// import store from "../store";
export const login = (data) => {
  return request({
    method: "POST",
    url: "/user/login",
    data,
  });
};
//获取用户自己完整的信息
export const getUserInfo = (id) => {
  return request({
    method: "GET",
    url: "/userInfo/get",
    params: { userId: id },
    // headers: {
    //   Authorization: `Bearer ${store.state.user.myToken}`,
    // },
  });
};

返回浏览器，监视请求，查看是请求头中否有有Authorization这一项内容。

总结

   感谢小伙伴们一键三连，咱们下期文章再见~

往期专栏
Java全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布