Golang JWT 认证 （二）-前端 Vue3 + axios

接上一篇，本篇以Vue3 + elementplus + axios 制作一个前段界面来测试使用
实现一个简单的登录登出，请求API效果

一：最终效果

1.登录过程

  axios.post('/auth/login', { username: form.username, password: form.password })
    .then(response => {
      if (response.data.code !== 0) {
        ElMessage.warning(`登陆失败: ${response.data.msg}`)
      } else {
      // 登录成功设置两个本地localStorage分别存放token 和 username（也可以附加其他信息）
        localStorage.setItem('token', response.data.data);
        localStorage.setItem('username', form.username);
        username.value = form.username;
        ElMessage.info(`${form.username}登陆成功!`)
      }
    })
    .catch(err => {
      console.log(err)
      ElMessage.error(err)
    })

2.请求后端过程

// 关键在于添加http头'Authorization': 'Bearer ' + localStorage.getItem('token')
  axios.get('/api/test', { headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') } })
    .then(response => {
      if (response.data.code !== 0) {
        ElMessage.warning(`获取: ${response.data.msg}`)
      } else {
        result.value = response.data.data
        ElMessage.info(`请求成功！`)
      }
    })
    .catch(err => {
      console.log(err)
      ElMessage.error(err)
    })

3.登出过程

// 从localStorage中删除存放的键便能实现登出
  localStorage.removeItem('username')
  localStorage.removeItem('token')

二：完整界面代码

<template>
  <el-config-provider namespace="ep">
    <el-menu class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1">Vue JWT Demo</el-menu-item>
      <el-menu-item index="2">当前用户: {{ username }}</el-menu-item>
    </el-menu>
    <!-- <img alt="Vue logo" class="element-plus-logo" src="./assets/logo.png" /> -->
    <el-row style="margin-top: 2rem">
      <el-col :span="8"></el-col>
      <el-col :span="8">
        <template v-if="username === ''">
          <el-form :model="form">
            <el-form-item label="用户">
              <el-input v-model="form.username" placeholder="username" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" placeholder="password" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%" @click="onLogin">获取Token</el-button>
            </el-form-item>
          </el-form>
        </template>
        <template v-else>
          <template v-if="result !== ''">
            <h1>请求成功</h1>
            <h2>{{ result }}</h2>
          </template>
          <el-button type="primary" @click="onAPI">请求API</el-button>
          <el-button @click="onLogout">退出登陆</el-button>
        </template>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <!-- <HelloWorld msg="Hello Vue 3.0 + Element Plus + Vite" /> -->
  </el-config-provider>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';

const form = reactive({
  username: '',
  password: '',
})

const username = ref(localStorage.getItem('username') || '')
const result = ref('')

const onLogin = () => {
  axios.post('/auth/login', { username: form.username, password: form.password })
    .then(response => {
      if (response.data.code !== 0) {
        ElMessage.warning(`登陆失败: ${response.data.msg}`)
      } else {
        localStorage.setItem('token', response.data.data);
        localStorage.setItem('username', form.username);
        username.value = form.username;
        ElMessage.info(`${form.username}登陆成功!`)
      }
    })
    .catch(err => {
      console.log(err)
      ElMessage.error(err)
    })
}

const onAPI = () => {
  axios.get('/api/test', { headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') } })
    .then(response => {
      if (response.data.code !== 0) {
        ElMessage.warning(`获取: ${response.data.msg}`)
      } else {
        result.value = response.data.data
        ElMessage.info(`请求成功！`)
      }
    })
    .catch(err => {
      console.log(err)
      ElMessage.error(err)
    })
}

const onLogout = () => {
  localStorage.removeItem('username')
  localStorage.removeItem('token')
  username.value = ''
}
</script>

<style>
#app {
  text-align: center;
  color: var(--ep-text-color-primary);
}
</style>

Todo

• 增加前端路由
• 增加token刷新机制