Vue3商店后台管理系统设计文稿篇（八）

记录使用vscode构建Vue3商店后台管理系统，这是第八篇，主要记录Vue3项目路由守卫的使用，提供完整代码；路由守卫配合Vuex进行登录状态存储；安装axios，并且对axios进行封装；提供完整项目代码

正文内容：

一、Vue3路由守卫（全局前置守卫）

使用场景：对于管理系统而言，进入管理系统前，都应该验证用户是否登录，如果用户没有登录则跳转到登录页面进行登录操作，如果用户已经登录则跳转到正常的管理页面

逻辑分析：系统页面加载的时候，先通过全局前置守卫进行判断用户是否登录，之后再进行页面跳转

具体实现：前面文章已经介绍Vuex相关知识，现在使用store进行存储用户登录相关的信息，全局前置守卫通过store中存储的用户信息判断用户是否登录；如果用户信息存在，则页面正常跳转，否则页面跳转到登录页面

代码如下所示：

// 创建全局前置路由守卫
router.beforeEach((to, from, next) => {// to: 即将进入的目标路由对象// from：当前导航正要离开的路由// next：调用该方法来 resolve这个钩子const uInfo = store.state.uInfo.userInfo;if (!uInfo.account) {if (to.path === "/login") {next();return;}next("/login");} else {next();}
});

存在问题：store存储的数据在页面刷新之后，数据将会重新初始化；当点击登录按钮之后会生成store的数据，这个操作一共进行一次，所以页面刷新之后，页面将会跳转到登录页面
解决问题：初始化store数据的时候，使用localStorage进行存储登录数据，store的默认初始化地方读取localStorage数据

设置默认初始化的代码如下：

state: {userInfo:(localStorage.getItem("loginData") && JSON.parse(localStorage.getItem("loginData"))) || {},},

二、设置网页title

1. 打开项目router文件夹下index.js文件，在路由表里面配置页面title名称，配置代码如下：

{path: "/login",name: "loginView",component: () => import("../views/login/LoginView.vue"),meta: {title: "登录",},
},

2. 打开项目router文件夹下index.js文件，在全局路由守卫中配置页面title名称，配置代码如下：

router.beforeEach((to, from, next) => {// 设置网页的titleif (to.meta.title) {document.title = to.meta.title;}
}

3. 运行效果如下图所示：
   

三、封装axios

1. 使用命令cnpm i axios --save安装axios到项目
2. 在项目src目录下创建文件夹util，在util文件夹下创建service.js文件，在这个文件里对axios进行封装，封装代码如下所示：

import axios from "axios";
import {ElLoading} from "element-plus";
import {ElMessage} from "element-plus";
import store from "../store/index.js";
// 使用create创建axios实例
let loadingObj = null;
const Service = axios.create({timeout: 8000,baseURL: "http://127.0.0.1:8888/api/private/v1/",headers: {"Content-type": "application/json;charset=utf-8",Authorization: store.state.uInfo.userInfo.token,},
});
// 请求拦截-增加loading,对请求做统一处理
Service.interceptors.request.use((config) => {loadingObj = ElLoading.service({lock: true,text: "努力加载中...",// spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)",});return config;
});
// 响应拦截-对返回值做统一处理
Service.interceptors.response.use((response) => {loadingObj.close();const data = response.data;if (data.meta.status != 200 && data.meta.status != 201) {ElMessage.error(data.meta.msg || "服务器出错");// 请求出错return data;}return data;},(error) => {loadingObj.close();ElMessage({message: "服务器错误",type: "error",duration: 2000,});}
);// post请求
export const post = (config) => {return Service({...config,method: "post",data: config.data,});
};
// get请求
export const get = (config) => {return Service({...config,method: "get",params: config.data,});
};
// put请求
export const put = (config) => {return Service({...config,method: "put",data: config.data,});
};
// delete请求
export const del = (config) => {return Service({...config,method: "delete",});
};

3. 继续在util文件夹下创建request.js文件，用于对接口请求进行封装，代码如下所示：

import {post, get, put, del} from "./service";// 登录系统
export const loginApi = (data) => {return post({url: "/login",data,});
};

4. 在登录页面使用封装的loginApi函数，先在script中引入，loginApi函数的使用如下所示：

<script>
import { reactive, toRefs } from "vue"
import { useStore } from "vuex"
import { useRouter } from "vue-router"export default {name: "login",setup() {const store = useStore()const router = useRouter()const data = reactive({ruleForm:{account: "",pass: "",},})const submitForm = () => {// 登录系统loginApi(data.ruleForm).then(res => {if (res.data) {store.commit('setUserInfo', res.data);localStorage.setItem("loginData", JSON.stringify(res.data))// 跳转/userrouter.push({path: "/"})}})}return {...toRefs(data),submitForm}}
}
</script>

四、项目完整代码

项目完整代码已经上传到github，地址如下：

https://github.com/crazymen-nanke/shop