vue3+nodejs配置路由_vue3 nodejs

我的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;