axios

a.引入axios in main.js

import axios from 'axios'
//配置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

b.login异步获取请求的例子

这里的validate是elementui里定义的表单方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VmAYsaWh-1645721883680)(C:\Users\11316\AppData\Roaming\Typora\typora-user-images\image-20220224221857626.png)]

这里的valid就是boolean，第二个object没有写，然后箭头函数嘛，参数以及=>箭头函数，后面是函数体，慢慢应该就能看习惯了。

在api接口文档中有写
在这里插入图片描述
那么post是请求方法，然后login是请求路径，loginForm在data中定义过，是一个包括username和password的对象，就直接用this.loginForm来作为参数。

先打印一下res看会得到什么，发现浏览器会返回一个 Promise结果。
因为这是一个异步，所以用 async+await 来展现。
await只能用在async修饰的的方法中，所以就应该把valid前面加一个async

此时打印res之后就会得到具体的axios封装好的响应对象

在这里插入图片描述
然后解构一下

此时打印出来的就是只有data，没有其他我们不需要的数据了

这里都是看开发者工具里面的
提示弹框登陆成功，登陆失败是怎么做的呢（我这里全局导入了elementui所以其实是可以不用再main.js里面去一个个导入组件，但是这个可以了解一下。

//首先和其他的组件类似
import Button from 'element-ui'
import { Message } from 'element-ui'

Vue.use(Button)
Vue.prototype.$message = Message;
//其他的是导入组件，这个是要挂载到vue上，可以随时用this.$message调用，大概是这个意思吧，也可以叫$别的名字，不过Message要写对就是了

那么导入之后再写这个部分，错误就提示错误弹框，正确就提示成功弹框

保存token，要在sessionStorage里面，因为这是一个非永久的保存方式，只是在会话过程中保存token，目中除了登陆之外的其他API接口，必须在登陆之后（有token）才能访问，所以需要使用token。
不放在localStorage里面因为是永久保存。
在这里插入图片描述

在图里面可以看见token
在这里插入图片描述
完整代码见下方

login:function(){
            this.$refs.loginFormRef.validate(async valid =>{
                // console.log(valid);
                if(!valid) return;
                const {data:res} = await this.$http.post("login",this.loginForm);
                //console.log(res)
                if(res.meta.status !==200) return this.$message.error('登录失败')
                this.$message.success('登陆成功')
                //1.将登陆成功之后的token保存到客户端的sessionStorage中
                //  1.1项目中除了登陆之外的其他API接口，必须在登陆之后才能访问
                //  1.2token只应在当前网站打开期间有效，所以将token保存在sessionStorage
                console.log(res)
                window.sessionStorage.setItem("token",res.data.token)
                //2.通过编程式导航跳转到后台主页，路由地址是/home
                this.$router.push('/home')
            })
        }

导航守卫

router.beforeEach((to, from, next) => {
//to：将要访问的页面 login
//from：从哪个页面跳转过来的
//next：一个放行函数 next() 放行，next('/login') 强制跳转
  if(to.path ==='/login') return next();
  //获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})