<template>
  <div class="login">
    <el-card class="box-card">
      <el-form label-width="80px" :model="form" ref="form" >
        <el-form-item  label="用户名" prop="userId">
          <el-input v-model="form.userId" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPassword">
          <el-input type="password" v-model="form.userPassword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="lo" type="primary" @click="login()" >登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button  @click="select()" >查询</el-button>
      <br>
      <el-text>{{ message }}</el-text>
    </el-card>
  </div>
</template>
<script>
import service from '../service.js'
export default {
  data(){
    return {
      form:{
        userId:'',
        userPassword:''
      },
      message:''
    }
  },
  methods:{
    login(){
      service({
        method: 'post',
        url: '/auth/login',
        data: this.form
      }).then(res => {
        console.log(res.data.data.token)
        this.$message({message:"登录成功！",type:"success"})
        window.localStorage.setItem("token",res.data.data.token)
      })
    },
    select(){
      service({
        method: 'post',
        url: '/auth/getUserMessageByToken',
        headers: {
          "Content-Type":"application/json",
          "token":window.localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res.data.data)
        this.message = res.data.data
      })
    }
  }
};
</script>

const routes = [
    {
        path:'/',
        redirect:'/login',
        name: '登录页',
        hidden:true,
        component:()=>import('@/components/Login') //路由懒加载
    },
    {
        path:'/login',
        name: '登录页',
        hidden:true,
        component:()=>import('@/components/Login') //路由懒加载
    }
]
export default routes;

import { createRouter, createWebHistory } from "vue-router"
import routes from "./routes"
var router=createRouter({
    history:createWebHistory(),
    routes
})
export default router

<template>
  <Login/>
  <router-view></router-view>
</template>
<script>
import Login from './components/Login.vue'
export default {
  name: 'App',
  components: {
    Login
  }
}
</script>

//axiosInstance.js
//导入axios
import axios from 'axios'
//使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。
const service = axios.create({
    baseURL:'http://localhost', //请求后端数据的基本地址，自定义
    timeout: 2000                   //请求超时设置，单位ms
})
//导出我们建立的axios实例模块，ES6 export用法
export default service