使用axios获取token用户列表数据

<template> <div class="about"> <!-- 搜索框 --> <header> <el-input v-model="search" size="mini" placeholder="输入关键字搜索" clearable style="height:40px;width:200px" /> </header> <el-table :data="list.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase())) " border style="width: 100%" > <el-table-column type="index"></el-table-column> <el-table-column label="姓名" prop="username"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column property="mobile" label="电话"></el-table-column> <el-table-column property="role_name" label="角色"></el-table-column> <el-table-column label="状态"> <template slot-scope="scope"> <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="change(scope.row.mg_state,scope.row.id)" ></el-switch> </template> </el-table-column> <el-table-column prop="address" label="操作"> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> </el-table-column> </el-table> <el-pagination @current-change="currentchange" @size-change="handleSizeChange" :current-page="1" :page-sizes="[2, 4,]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="length" ></el-pagination> </div> </template> </div> </template> <script> export default { data() { return { list: [], search: "", length: 0, }; }, mounted() { this.$axios({ method: "get", url: `https://www.liulongbin.top:8888/api/private/v1/users`, headers: { Authorization: localStorage.getItem("TOKEN"), }, params: { pagesize: 2, pagenum: 1, }, }).then((res) => { this.list = res.data.data.users; this.length = res.data.data.total; console.log(res); }); }, beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 let token = localStorage.getItem("TOKEN") === null; // console.log(token); if (token) { next({ path: "/" }); } else { next(); } }, methods: { handleSizeChange(val) { this.$axios({ method: "get", url: `https://www.liulongbin.top:8888/api/private/v1/users`, headers: { Authorization: localStorage.getItem("TOKEN"), }, params: { pagesize: val, pagenum: 1, }, }).then((res) => { this.list = res.data.data.users; console.log(res); }); }, // 分页器 currentchange(page) { // console.log(page) console.log(page); this.$axios({ method: "get", url: `https://www.liulongbin.top:8888/api/private/v1/users`, headers: { Authorization: localStorage.getItem("TOKEN"), }, params: { pagesize: 2, pagenum: page, }, }).then((res) => { this.list = res.data.data.users; console.log(res); }); }, }, }; </script> <style scoped> header { width: 80%; display: flex; justify-content: space-between; } </style>