我的vue3+nodejs仓库地址 (根据千峰教育教学视频来的)
https://gitee.com/gyub/nodejs.githttps://gitee.com/gyub/nodejs.git
/router/config.js 路由模块化 添加权限标记
把红色区域里面的模块放在这个文件夹里面,方便管理
/views/MainBox.vue
import Center from '@/views/center/Center';
import Home from '@/views/home/Home';
import NewsAdd from '@/views/news-manage/NewsAdd';
import NewsList from '@/views/news-manage/NewsList';
import NotFund from '@/views/notFound/NotFund';
import ProductAdd from '@/views/product-manage/ProductAdd';
import ProductList from '@/views/product-manage/ProductList';
import UserAdd from '@/views/user-manage/UserAdd';
import UserList from '@/views/user-manage/UserList';
const routes = [{
path: '/',
redirect: '/index'
}, {
path: '/:pathMatch(.*)*',
name: NotFund,
component: NotFund
}, {
path: '/center',
component: Center
}, {
path: '/index',
component: Home
}, {
path: '/news-manage/newsadd',
component: NewsAdd
}, {
path: '/news-manage/newslist',
component: NewsList
}, {
path: '/product-manage/productadd',
component: ProductAdd
}, {
path: '/product-manage/productlist',
component: ProductList
}, {
path: '/user-manage/useradd',
component: UserAdd,
requireAdmin: true
}, {
path: '/user-manage/userlist',
component: UserList,
requireAdmin: true
}
]
export default routes
/store/index.js 是否是第一次动态添加路由 侧边栏收缩 当前用户信息存储
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({
state: {
// 动态添加路由是否是第一次进来
isFirstEnter: false,
// aside侧边栏收缩
isCollapse: true,
// 当前用户信息存储
userInfo: {}
},
getters: {
},
mutations: {
changeFirstEnter(state, value) {
state.isFirstEnter = value;
},
changeCollapse(state) {
state.isCollapse = !state.isCollapse;
},
changeUserInfo(state, value) {
state.userInfo = {
...state.userInfo,
...value
}
},
// 退出登录时 清空当前用户信息
clearUserInfo(state, value) {
state.userInfo = {}
}
},
actions: {
},
modules: {
},
// 持久化
plugins: [createPersistedState({
// 控制是否持久化
paths: ["isCollapse", "userInfo"]
})]
})
/router/index.js router.addRoute 路由守卫 动态添加路由 添加权限设置
import { createRouter, createWebHashHistory } from 'vue-router';
import Login from '@/views/Login.vue';
import MainBox from '@/views/MainBox.vue';
import routerConfig from '@/router/config';
import store from '@/store/index';
const routes = [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/mainbox',
name: 'mainbox',
component: MainBox
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
router.beforeEach((to, from, next) => {
if (to.name === 'login') {
next();
return
} else {
if (!localStorage.getItem('token')) {
next({ path: '/login' })
} else {
// 动态路由走一遍就好
if (!store.state.isFirstEnter) {
// 防止动态路由由于权限原因重复添加----删除嵌套路由
router.removeRoute('mainbox');
// 添加嵌套路由
configRouter();
next({ path: to.path });
} else {
next();
}
}
}
})
// 动态添加嵌套路由
const configRouter = () => {
// 判断路由里面是否已存在mainbox
if(!router.hasRoute('mainbox')) {
router.addRoute({
path: '/mainbox',
name: 'mainbox',
component: MainBox
})
}
routerConfig.forEach(item => {
checkPermission(item) && router.addRoute('mainbox', item)
})
// 第一次动态添加嵌套路由
store.commit('changeFirstEnter', true);
}
// 判断当前用户是否有管理员权限
const checkPermission = (item) => {
// 在路由配置做的权限标记
if(item.requireAdmin) {
return store.state.userInfo.role==1
}
return true
}
export default router;