解决无效token问题

最新推荐文章于 2023-10-09 10:33:37 发布

ZQ...

最新推荐文章于 2023-10-09 10:33:37 发布

阅读量8.9k

点赞数 4

分类专栏：前端学习文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/weixin_53071920/article/details/123959283

版权

在黑马课程中遇到无效token问题，导致无法获取用户列表数据。问题出现在main.js文件，通过删除import './axios/index'解决了问题。寻求对这一现象的解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决无效token问题

这里先说明一下，在黑马这个课程里，我在获取左侧菜单栏的数据的时候就出现了无效token，但是我那个时候认为不重要，就在script标签的data里写死了数据，也是利用循环做出效果的，大伙可以看一下。但是在后面做用户列表获取数据的时候还是不能获取数据，输出无效token

文件截图(注意红色框这里)
在这里插入图片描述
首先附上源码

login.vue文件(这个一般没什么问题)

<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!-- 登录表单区域 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <!--        用户名-->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <!--        密码-->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-key" type="password"></el-input>
        </el-form-item>
        <!--        按钮区域-->
        <el-form-item class="btns">
          <el-button type="primary" @click="Login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

  export default {
   
    data() {
   
      return {
   
        // 数据绑定对象
        loginForm: {
   
          username: 'admin',
          password: '123456'
        },
        // 验证规则对象
        loginFormRules: {
   
          //验证用户
          username: [
            {
   required: true, message: '请输入用户名', trigger: 'blur'},
            {
   min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {
   required: true, message: '请输入登录密码', trigger: 'blur'},
            {
   min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
   
      Login() {
   
        // 预验证
        this.$refs.loginFormRef.validate(async valid => {
   
          //未验证通过则直接return
          if (!valid) return;
          //不加await的化不会打印出数据，await只能用于async修饰的函数
          const {
    data:res } = await this.$http.post("login", this.loginForm);
          // {
   </

最低0.47元/天解锁文章