搭建Vue3 后台管理框架 —— 构建路由 封装AXIOS 构建Stores基础
声明本文章只是自己搭建后台框架得一个笔记，不作为任何项目搭建指南，大家看着乐呵乐呵就行。
往期
# 搭建Vue3 后台管理框架 —— 项目创建
# 搭建Vue3 后台管理框架 —— 登录页面
前言
最近事多，都是抽点空余时间写一写，从开始写到现在，一点一点的构架，也算是把基础从新巩固一遍，同时也把相关技术多熟悉熟悉，技术一直在更新，学习永不停止。
构建路由
index.js 路由配置
import { createRouter, createWebHistory } from "vue-router";
import routers from "./module/public";
import NProgress from 'nprogress';
import { USER_TOKEN } from "../utils/LocalDateName";
import { getStorage } from "../utils/PublicFunction";
const onAuthPage = ["/login"];
// 页面加载 进度条
NProgress.configure({
showSpinner: false, // true 开启loading false 关闭
});
const router = createRouter({
history: createWebHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
scrollBehavior(to, from, savedPosition) {
return savedPosition ? savedPosition : { left: 0, top: 0 }; // 页面初始化保留位置
},
routes: routers
});
// 创建路由守卫
router.beforeEach((to, from, next) => {
// 开启 进度条
NProgress.start()
// 当前路由 不为登录页面 且 没有token 回退到登录页面
if (!onAuthPage.includes(to.path) && !getStorage(USER_TOKEN)) {
next({ path: "/login", replace: true });
} else {
next();
}
});
router.afterEach((to)=>{
// 关闭 进度条
NProgress.done();
})
export default router;
public.js 这个文件存放公共路由 登录 404 等等
export default [
{
path: '/login',
name: 'login',
meta: {
icon: '',
title: '登录',
},
component:() => import('../views/login/Login.vue')
}
]
关于module 是用来存放所有的路由文件
关于nprogress 是一个前端页面加载进度条一个小装饰
nprogress官方
目录结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wxGffG1b-1661763090388)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/262d48ceb3784c37970858bb8c61c3f3~tplv-k3u1fbpfcp-watermark.image?)]
构建权限Stores
userStores.js 获取用户信息 按钮权限 存储起来
import { defineStore } from "pinia";
import { USER_AUTH, USER_INFO, USER_TOKEN } from "../utils/LocalDateName";
import { getStorage, setStorage, removeStorage } from "../utils/PublicFunction";
import { useMenuStore } from './menuStore'
export const userInfoStore = defineStore("userInfoStore", {
state: () => ({
userInfo: getStorage(USER_INFO) || {}, // 用户信息
userToken: getStorage(USER_TOKEN) || "", // 用户token
userAuth: getStorage(USER_AUTH) || [] // 权限菜单
}),
getters: {
// 判断用户是否登录
isLogin: state => Object.keys(state.userInfo).length > 0
},
actions: {
// 设置用户登录信息
setUserInfo(payload) {
if (payload.user) {
setStorage(USER_INFO, payload.user);
this.userInfo = payload.user;
}
if (payload.token) {
setStorage(USER_TOKEN, payload.token);
this.userToken = payload.token;
}
},
// 设置操作颗粒度权限
setUserAuth(payload) {
if (payload.auth) {
setStorage(USER_AUTH, payload.auth);
this.userAuth = payload.auth;
}
},
// 退出登录清空权限
LoginOut(){
removeStorage(USER_TOKEN)
removeStorage(USER_INFO)
removeStorage(USER_TOKEN)
this.userInfo = {}
useMenuStore.setFunctionMenu([])
}
}
});
menuStores.js 获取功能权限菜单 也就是路由权限
import { defineStore } from "pinia";
import { USER_MENU } from "../utils/LocalDateName";
import { setStorage } from "../utils/PublicFunction";
export const useMenuStore = defineStore("userMenuStore", {
state: () => ({
userMenu: getStorage(USER_MENU) || [] // 功能权限菜单
}),
getters: {},
actions: {
// 获取路由权限菜单
async getFunctionMenu() {
// 请求功能接口 这里请求接口 获取data
setStorage(USER_MENU, data);
},
// 设置
setFunctionMenu(payload){
this.userMenu = payload
}
}
});
目录结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ixwTiGI-1661763090390)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf3eece38b7942f9af0a09ed3d9de787~tplv-k3u1fbpfcp-watermark.image?)]
封装axios
axios 关于axios封装 真的可以说全网满天飞 这里只代表个人想法 肯定有不足得地方
import axios from "axios";
import router from '@/router'
import { message, Modal } from 'ant-design-vue';
import { getStorage } from "./PublicFunction";
import { userInfoStore } from '@/stores/userStores'
class HttpRequest {
static getInsideConfig() { // 设置请求头
return {
headers: { "X-Requested-With": "XMLHttpRequest" } // X-Requested-With : null (返回为文本) XMLHttpRequest (返回JSON格式)
};
};
intercetors(instance) {
// 设置请求拦截 添加token
instance.interceptors.request.use((config)=>{
if(config.url.includes('company-console')){ // 判断请求地址
const authToken = getStorage('USER_TOKEN') // 获取本地存储token
authToken && (config.headers['xh-token'] = authToken) // 请求头添加token
}
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截
instance.interceptors.response.use((response)=>{
if(response.config.url.includes('company-console') && !response.config.url.includes('export') && !response.config.url.includes('download')){
if([401,202].includes(response.data.code)){
userInfoStore.LoginOut()
router.replace({path:'/login'})
}
if(response.data.code && response.data.code !== 401 && response.data.code !== 202){
modal = Modal.error({
title: '错误提示',
content: response.data.msg,
centered: true
});
}
if(response.data.code && response.data.code == 202){
message.warning({
content: response.data.msg,
onClose: () => {
userInfoStore.LoginOut()
router.replace({ path: '/login' });
},
});
}
}
return response.data
},error => {
const { status } = error.response
if(status === 401){
userInfoStore.LoginOut()
router.replace({ path: '/login' });
}
return Promise.reject(error)
})
};
request(options) {
const instance = axios.create();
options = Object.assign({}, HttpRequest.getInsideConfig(), options);
this.intercetors(instance);
return instance(options);
}
}
const httpRequest = new HttpRequest();
export default httpRequest;
目录结构
LocalDateName.js || PublicFunction.js 这个两个文件 传送门可以获取到
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g1JbI7SD-1661763090391)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8506f982dac4eccac644c7c0bb4b67f~tplv-k3u1fbpfcp-watermark.image?)]
结尾
经过这么多天(零碎得时间)，才写了这点东西，而且觉得很多地方还需要打磨，暂时想法是先把大体框架打起来然后一点一点打磨吧，现在最大得问题是后端怎么办（后端我不会啊），还在纠结是用前端server实现还是使用后端java技术（后端需要自学）各位jym有什么好的建议。