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}`)
      }