// router/constRoutes.js
// ---------------------------------------
// constRoutes 固定需要加載的路由，
// notFound 動態(tài)路由加載完成后再添加，否則刷新頁面，此時還沒有路由，會直接定向到notFound頁面
// ---------------------------------------
export const constRoutes = [
? {
? ? path: '/',
? ? redirect: '/home'
? },
? {
? ? path: '/home',
? ? name: 'home',
? ? component: () => import('@/views/home/index.vue')
? },
? {
? ? path: '/login',
? ? name: 'login',
? ? component: () => import('@/views/login/index.vue')
? }
]
export const notFound = {
? path: '/:pathMatch(.*)*',
? name: 'notFound',
? component: () => import('@/views/not-found/not-found.vue')
}

// router/asyncRoutes.js
// ---------------------------------------
// 注意：children下的path不需要加'/'
// meta下可以加各種本地你想要的參數(shù)
// ---------------------------------------
const Layout = () => import('@/layout/index.vue')
export const asyncRoutes = [
? {
? ? path: '/monitoringCenter',
? ? name: 'MonitoringCenter',
? ? component: Layout,
? ? meta: { title: '監(jiān)控中心' },
? ? children: [
? ? ? {
? ? ? ? path: 'carMonitoring',
? ? ? ? name: 'CarMonitoring',
? ? ? ? meta: { title: '車輛監(jiān)控' },
? ? ? ? children: [
? ? ? ? ? {
? ? ? ? ? ? path: 'positioning',
? ? ? ? ? ? name: 'Positioning',
? ? ? ? ? ? component: () => import('@/views/monitoringCenter/positioning/index.vue'),
? ? ? ? ? ? meta: { title: '實時定位' }
? ? ? ? ? }
? ? ? ? ]
? ? ? },
? ? ? {
? ? ? ? path: 'monitorSetting',
? ? ? ? name: 'MonitorSetting',
? ? ? ? meta: { title: '監(jiān)控設(shè)置' },
? ? ? ? children: [
? ? ? ? ? {
? ? ? ? ? ? path: 'ruleManagement',
? ? ? ? ? ? name: 'RuleManagement',
? ? ? ? ? ? component: () => import('@/views/monitoringCenter/ruleManagement/index.vue'),
? ? ? ? ? ? meta: { title: '報警規(guī)則' }
? ? ? ? ? }
? ? ? ? ]
? ? ? }
? ? ]
? },

// router/index.js
// ---------------------------------------
// 先加載constRoutes 固定路由
// ---------------------------------------
import { createRouter, createWebHistory } from 'vue-router'
import { constRoutes } from '@/router/constRoutes'
const router = createRouter({
? history: createWebHistory(import.meta.env.BASE_URL),
? routes: constRoutes
})
export default router

// utils/map-menus.js
// ---------------------------------------
//導(dǎo)出方法，menuList是線上路由，Routes第一次默認(rèn)是本地路由
// ---------------------------------------
import { asyncRoutes } from '@/router/asyncRoutes'
// 添加redirect重定向
let redirect = ''
// 匹配路由，添加對應(yīng)線上傳回來的參數(shù)
export function mapMenusToRoutes(menuList, Routes = asyncRoutes) {
? const routes = []
? for (let item of Routes) {
? ? const m = menuList.find((menu) => item.name == menu.name)
? ? if (m) {
? ? // 線上按鈕權(quán)限放在attr中
? ? ? m.attr && m.attr.length && (item.attr = m.attr)
? ? ? item.id = m.id
? ? ? // ‘?.'判斷是否有children且大于零
? ? ? if (item.children?.length) {
? ? ? ?? ?// 添加重定向
? ? ? ? if (item.path.includes('/')) {
? ? ? ? ? redirect = item.path
? ? ? ? ? item.redirect = `${redirect}/${item.children[0].path}`
? ? ? ? } else {
? ? ? ? ? item.redirect = `${redirect}/${item.path}/${item.children[0].path}`
? ? ? ? }
? ? ? ? // 如果有children 則回調(diào)并賦值
? ? ? ? item.children = mapMenusToRoutes(m.children, item.children)
? ? ? }
? ? ? routes.push(item)
? ? }
? }
? return routes
}

// stores/login.js
import { defineStore } from 'pinia'
import router from '@/router'
import { notFound } from '@/router/constRoutes'
import localCache from '@/utils/cache'
import { mapMenusToRoutes } from '@/utils/map-menus'
import { login, getInfo } from '@/api/user/login'
export const useLoginStore = defineStore({
? id: 'useLoginStore',
? state: () => ({
? ? token: '',
? ? menuList: [],
? ? routeMenus: []
? }),
? getters: {
? ? routeMenusGet() {
? ? ? return this.routeMenus
? ? }
? },
? actions: {
? ? async LoginAction(loginForm) {
? ? ? // 1.實現(xiàn)登錄邏輯
? ? ? const { data: loginData } = await login(loginForm)
? ? ? this.token = loginData.token
? ? ? // 保存至localStorage，方法隨意
? ? ? localCache.setCache('token', this.token)
? ? ? // 2.跳轉(zhuǎn)至首頁
? ? ? router.push('/home')
? ? },
? ? // router.beforeEach獲取菜單樹
? ? async getInfoAction() {
? ? ? const infoData = await getInfo({ token: this.token })
? ? ? this.menuList = infoData.data.menuList
? ? ? this.addRouteMenus()
? ? },
? ? // 動態(tài)加載路由
? ? addRouteMenus() {
? ? ? this.routeMenus = mapMenusToRoutes(this.menuList)
? ? ? // vue3中只有addRoute
? ? ? for (let item of this.routeMenus) {
? ? ? ? router.addRoute(item)
? ? ? }
? ? ? // 最后添加，否則刷新請求線上路由時，還沒有加載完，會直接定向到notFound
? ? ? router.addRoute(notFound)
? ? }
? }
})

// src/permission.js
// main.js中引入次文件 import '@/permission'
import router from './router'
import localCache from '@/utils/cache'
import { useLoginStore } from '@/stores/user/login'
router.beforeEach(async (to, from, next) => {
? document.title = `${to.meta.title}`
? if (to.path === '/login') {
? ?? ?// 清空localStorage
? ? localCache.clearCache()
? ? next()
? } else {
? ? const token = localCache.getCache('token')
? ? if (!token) {
? ? ? next(`/login`)
? ? } else {
? ? ? const loginStore = useLoginStore()
? ? ? if (loginStore.routeMenus.length) {
? ? ? ? next()
? ? ? } else {
? ? ? // 如果沒有路由，調(diào)用動態(tài)加載路由
? ? ? ? try {
? ? ? ? ? await loginStore.getInfoAction()
? ? ? ? ? next({ ...to, replace: true })
? ? ? ? } catch (error) {
? ? ? ? ? next(`/login`)
? ? ? ? }
? ? ? }
? ? }
? }
})