一、封装本地存储操作模块
新建文件src\utils\storage.js封装操作token的方法
/* 存储数据 */
export const setItem = (key, value) => {
// 将数组、对象类型的数据转换为 JSON 格式字符串进行存储
if (typeof value === "object") {
value = JSON.stringify(value);
}
window.localStorage.setItem(key, value);
};
/* 获取数据 */
export const getItem = (key) => {
const data = window.localStorage.getItem(key);
try {
return JSON.parse(data);
} catch (err) {
return data;
}
};
/* 删除数据 */
export const removeItem = (key) => {
window.localStorage.removeItem(key);
};
二、vuex处理用户登陆后的token值
新建文件：src\store\index.js
安装导入：npm install vuex
import Vue from "vue";
import Vuex from "vuex";
// 加载storage模块:获取token，存储token
import { getItem, setItem } from "@/utils/storage";
Vue.use(Vuex);
// 用户登陆后的token值
const TOKEN_KEY = "X-Token";
export default new Vuex.Store({
// 处理用户 Token,定义容器当中数据
state: {
// 用户的登录状态信息，存储当前登录用户信息（token等数据）
// 1. user: null
// 2. user: JSON.parse(window.localStorage.getItem(TOKEN_KEY))
user: getItem(TOKEN_KEY),
},
mutations: {
setUser(state, data) {
state.user = data;
// 为了防止刷新丢失，我们需要把数据备份到本地存储
// window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user))
setItem(TOKEN_KEY, state.user);
},
},
actions: {},
modules: {},
});
三、封装 axios 请求模块
下载导入：npm install axios
// 封装 axios 请求模块
import axios from "axios";
import router from "@/router";
// axios.create 方法创建一个axios的实例
const request = axios.create({
baseURL: "/localhost", // 接口的基准路径,改成自己的项目基地址
});
// 请求拦截器：是否注入token
request.interceptors.request.use(
function (config) {
return config;
},
function (error) {
return Promise.reject(error);
}
);
// store文件中vuex和localstorage对token进行处理之后响应拦截器中统一处理 token 过期
// 处理流程：在axios拦截器中加入token刷新逻辑；用户token过期时，向服务器请求新的 token；旧token替换为新token；然后继续用户当前的请求
// 响应拦截器
request.interceptors.response.use(
function (response) {
return response;
},
async function (error) {
console.dir(error);
if (error.response && error.response.status === 401) {
// 校验是否有 refresh_token
const user = store.state.user;
if (!user || !user.refresh_token) {
router.push("/login");
return;
}
// 如果有refresh_token，则请求获取新的 token
try {
const res = await axios({
method: "PUT",
url: "/admin/waterMeter/login", // 改成自己的项目的登录地址
headers: {
Authorization: `Bearer ${user.refresh_token}`,
},
});
// 如果获取成功，则把新的 token 更新到容器中
console.log("刷新 token 成功", res);
store.commit("setUser", {
token: res.data.data.token, // 最新获取的可用 token
refresh_token: user.refresh_token, // 还是原来的 refresh_token
});
return request(error.config);
} catch (err) {
// 如果获取失败，直接跳转 登录页
console.log("请求刷线 token 失败", err);
router.push("/login");
}
}
return Promise.reject(error);
}
);
export default request;
四、在main.js文件内全局注册store、axios
import Vue from "vue";
import App from "./App.vue";
import router from "./router"; // 路由对象
import store from "./store"; // 管理用户token
import axios from "axios";
... ...
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
五、新建api文件夹，存放接口文件
// 存储接口封装，用户相关的请求模块
import request from "@/utils/request.js";
// export const login = (user) => {
// return request({
// url: '', // 接口地址
// method: 'POST', 'GET', // 请求方式
// // 如果参数通过请求体来发(post)，用data是请求体参数
// // 如果参数通过请求行来发(get)，用params是路径参数
// data: user
// })
// }
// 用户登录
export const login = (data) => {
return request({
method: "POST",
url: "/admin/login",
data,
});
};
// 需要携带 token 获取数据时，携带登陆成功后存储在本地的token值
// 查询所有使用记录
export const listRecord = () => {
return request({
method: "GET",
url: "/admin/record/listRecord",
headers: {
"X-Token": localStorage.getItem("X-Token"),
},
});
};
// 携带params参数，也是手动输入的值
export const others = (params) => {
return request({
method: "GET",
url: "/admin/others",
params,
});
};
六、在组件页面内调接口拿数据
接口使用例子1
1. 登录接口的使用（同注册），在页面导入接口
// 调用登录接口
import { login } from '@/api/user'
2. 通过async await 来拿到用户输入的值，根据返回结果进行判断返回相应提示
async onSubmit (values) {
// 手动输入提交的数据：登录、注册、修改密码等提交的值
let { mobile: vcPhone, password: vcLoginpassword } = values
const { data } = await login({ vcPhone, vcLoginpassword, })
console.log(data);
console.log("submit", values);
if (data.code == "200") {
this.$toast.success("登录成功");
this.$router.push({ name: "shouye" });
} else if (data.message == "没有注册，请先注册") {
this.$toast.fail(data.message);
} else if (data.message == "密码错误") {
this.$toast(data.message);
} else {
this.$toast.fail('操作异常，请重试')
}
console.log("submit", values);
},
注意：mobile、password是用户在data里定义的值，这里需要将拿到的值赋给自己定义的。
或者把data里的值改成和后端字段相同，此时可简写。
例如：
let { vcPhone, vcLoginpassword } = values
const { data } = await login({ vcPhone, vcLoginpassword, })
接口使用例子2
1. 通过接口获取数据进行渲染，这里把需要的接口解构出来
import { listRecord } from '@/api/user'
2. data定义需要渲染的数据（可与后端字段一致）
data () {
return {
recordFrom: {
vcReadid: "",
vcReaddate: "",
vcCurrremainmoney: "",
},
list: [], // 存放所有使用记录数据
loading: false,
finished: false,
};
},
3. 在方法里面调用接口，把拿到的数据放到一个自己定义的数组里面list
methods: {
async getAllusedRecord () {
try {
const { data } = await listRecord()
this.list = data
this.loading = false; // 加载状态结束
this.finished = true;
// console.log(this.list);
} catch (err) {
this.$toast('获取使用记录失败')
}
},
},
4. 通过v-for渲染获取到的数据
<ul v-for="item in list" :key="item.name" :title="item">
<li>
编号：{{ item.vcReadid }}
时间：{{ item.vcReaddate }}
金额：{{ item.vcCurrremainmoney }}
</li>
</ul>
