Vue侧边栏优化与Fetch请求及授权机制解析-优快云博客

本文链接：https://blog.youkuaiyun.com/scuff/article/details/124136963

本文介绍了如何解决Vue应用中侧边栏未铺满全屏的问题，通过添加CSS样式实现。同时，详细阐述了使用Fetch进行POST和GET请求的方法，包括设置请求头以携带Authorization token。此外，讨论了Authorization与token的区别，说明了在前后端分离和跨域场景下，token如何作为用户身份验证的手段，确保请求的安全与有效性。

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

1、vue侧边栏未铺满

在这里插入图片描述
给el-menu这个组件加上下面class

.left-menu{
    height: 100vh;
  }

在这里插入图片描述

2、fetch请求（POST、GET）

post请求

				//向后台发送登录数据请求
                fetch('http://localhost:8080/api/auth/login', {
                    body: JSON.stringify(this.user),
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization':`Bearer ${storageService.get(storageService.USER_TOKEN)}`
                    },
                    method: 'POST',
                }).then(res =>res.json()).then(res=>{
                      console.log(res)
                      res.records.token
                      //密码正确
                      this.$router.push("/home")
                  })

get请求

	//请求用户信息
   fetch('http://localhost:8080/api/auth/info',{
          headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json',
         'Authorization':`Bearer ${storageService.get(storageService.USER_TOKEN)}`,
         }}).then(res=>res.json()).then(res=>{storageService.set(storageService.USER_INFO,JSON.stringify(res.data.user))
          //跳转页面
          this.$router.push("/home")
    })

3、Authorization和token区别

header里面放Authorization，就是为了验证用户身份，现在前后端分离，有跨域问题，session经常会失效。所以使用了token来验证用户身份token和session拥有同一功能就是判断当前用户是不是之前登录了的用户。比如你登陆后，在同一浏览器不同页面打开同一网址，你想跳过登录环节，这时候因为跨域问题，发送给后台的session会是一个新的session，服务器没法通过session来验证你的身份，所以服务器的过滤器（或拦截器）会过滤掉你的请求，让你返回登陆界面重新登录，使用户体验变差

Authorization里面放的就是token，就相当于每次发送请求的时候，拦截器都会拦截一次你的请求，把你请求头部的Authorization拿出来，与当前存在服务器上的token做对比。如果是同一个，则证明是同一用户，然后拦截器就为你当前的请求放行，继续执行你的请求，如果不是同一个，那么服务器会截断你的请求并发送错误码给前端，让前端验证身份重新登陆。