前言

本篇讲解的路由实现方案：默认存在的路由json->登录获取路由的json数据和权限->index.vue页面通过watch监听router为路由附加默认值->通过router.push跳转->触发beforeEach实现页面权限的判断和addrouter合并路由列表

2. 实现

1、登录页面创建登录函数和watch监听路由

//redirect 赋值
watch: {
    $route: {
      handler (route) {
        this.redirect = (route.query && route.query.redirect) || '/'
      },
      immediate: true
    }
  },

//登录函数
const ruleForm = ref('')
const login = (userInfo) => {
    dispatch('user/login', userInfo)
}
const handleRoute = () => {
  return data.redirect === '/404' || data.redirect === '/403'
  ? '/'
  : data.redirect
}
const handleLogin = () => {
  ruleForm.value.validate(async (valid) => {
  if (valid) {
    try {
      data.loading = true
      await login(data.forms)
      await router.push(handleRoute())
      } finally {
         data.loading = false
      }
    }
  })
}

2、调用的login方法

（1）登录方法

const actions = {
	//登录成功将token存储到localStorage中，并为vuex的token中赋值
  async login ({ commit }: { commit: any }, userInfo: any) {
    // const { data } = await login(userInfo)
    // const token = data[tokenName]
    const token = 'admin-token-bbfd1c4e-4e11-F71E-B4B6-aEbCE62cDC3A'
    if (token) {
      commit('setToken', token)
      const hour = new Date().getHours()
    } else {
      const err = `登录接口异常，未正确返回${tokenName}...`
      throw err
    }
  }
}

（2）存储token

 * @description 存储token
 * @param token
 */
export function setToken (token:any) {
  if (storage) {
    if (storage === 'localStorage') {
      return localStorage.setItem(tokenTableName, token)
    } else if (storage === 'sessionStorage') {
      return sessionStorage.setItem(tokenTableName, token)
    } else if (storage === 'cookie') {
      return cookie.set(tokenTableName, token)
    } else {
      return localStorage.setItem(tokenTableName, token)
    }
  } else {
    return localStorage.setItem(tokenTableName, token)
  }
}

3、router.push的时候调用路由守卫

（1）创建路由守卫，建议路由守卫封装为单独的文件

详细讲解了路由的跳转和

/**
 * @description 路由守卫
 */
import store from '@/store'
import router from '@/router'
import getPageTitle from '@/utils/pageTitle'
import { toLoginRoute } from '@/utils/routes'
import configOb from '@/config'
//调用封装的配置文件
//intelligence(前端导出路由)和all(后端导出路由)两种方式
//authentication: 'intelligence',
const { authentication } = configOb
export function setup () {
  router.beforeEach(async (to, from, next) => {
    //获取token
    let hasToken = store.getters['user/token']
    if (hasToken) {
      if (store.getters['routes/routes'].length) {
        // 禁止已登录用户返回登录页
        if (to.path === '/login') {
          next({ path: '/' })
        } else next()
      } else {
      	//setRoutes:下面讲解，存储vuex中routes,合并路由列表
        await store.dispatch('routes/setRoutes', authentication)
          next({ ...to, replace: true })
      }
    } else {
      next(toLoginRoute(to.path))
    }
  })
  router.afterEach((to) => {
  	//设置标题
    document.title = getPageTitle(to.meta.title)
  })
}

（2）var文件引用

export function setupVab (app: any) {
  // 加载插件
  const Plugins = require.context('./plugins', true, /\.ts$/)
  Plugins.keys().forEach((key) => Plugins(key).setup(app))
}

（3）将在main中添加调用，由于我封装到permissions.ts文件中，通过var文件调用

import { createApp } from 'vue'
import App from './App.vue'
import { setupVab } from '@/vab'

const app = createApp(App)
setupVab(app)

(4) setRoutes方法：存储vuex中routes,合并路由列表

async setRoutes ({ commit }: { commit: any }, mode = 'none') {
    // 默认前端路由
    const routes = [...asyncRoutes]
    // 设置游客路由关闭路由拦截
    const control = mode === 'visit' ? false : rolesControl
    // 后端路由
    // if (authentication === 'all') {
    //   const { data } = await getRouterList()
    //   const { list } = data
    //   if (!isArray(list))
    //     gp.$baseMessage(
    //       '路由格式返回有误！',
    //       'error',
    //       false,
    //       'vab-hey-message-error'
    //     )
    // if (list[list.length - 1].path !== '*') {
    //   list.push({
    //     path: '/:pathMatch(.*)*',
    //     redirect: '/404',
    //     name: 'NotFound',
    //     hidden: true
    //   })
    //   routes = convertRouter(list)
    // }
    // 根据权限和rolesControl过滤路由
    const finallyRoutes = filterRoutes([...constantRoutes, ...routes], control)
    // // 设置菜单所需路由
    commit('setRoutes', finallyRoutes)
    // // 根据可访问路由重置Vue Router
    await resetRouter(finallyRoutes)
  },

(5)filterRoutes:根据权限和rolesControl过滤路由

export function filterRoutes (routes:any, rolesControl:any, baseUrl = '/') {
  return routes
    .filter((route:any) => {
      if (rolesControl && route.meta && route.meta.roles) {
        return hasAccess(route.meta.roles)
        return false
      } else { return true }
    })
    // .map((route) => {
    //   if (route.path !== '*' && !isExternal(route.path))
    //     route.fullPath = resolve(baseUrl, route.path)
    //   if (route.children)
    //     route.children = filterRoutes(
    //       route.children,
    //       rolesControl,
    //       route.fullPath
    //     )
    //   return route
    // })
}

(6)toLoginRoute:

/**
 * 获取当前跳转登录页的Route
 * @param currentPath 当前页面地址
 */
export function toLoginRoute (currentPath:any) {
  if (recordRoute && currentPath !== '/') {
    return {
      path: '/login',
      query: { redirect: currentPath },
      replace: true
    }
  } else {
    return { path: '/login', replace: true }
  }
}

4、创建router.js 文件，创建路由列表和添加路由的方法

设置默认路由和模拟请求后添加的路由，定义添加路由的方法

// 定义路由和路由添加的方法
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import configOb from '@/config'
import { getNames } from '@/utils/routes'

//设置默认数组
export const constantRoutes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue'),
    hidden: true
  },
  {
    path: '/403',
    name: '403',
    component: () => import('../views/403.vue'),
    hidden: true
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404.vue'),
    hidden: true
  }
]

//假设请求的到的数组
export const asyncRoutes = [
  {
    path: '/',
    name: 'Root',
    // component: Layout,
    redirect: '/index',
    meta: {
      title: '平台首页',
      icon: 'iconfont icon-ptsyy icon-white'
    },
    children: [
      {
        path: 'index',
        name: 'Index',
        component: () => import('../views/index/index.vue'),
        meta: {
          title: '首页',
          icon: 'home-2-line',
          noClosable: true
        }
      }
    ]
  },
  {
    path: '/error',
    name: 'Error',
    // component: Layout,
    redirect: '/error/403',
    menuHidden: true,
    meta: {
      title: '错误页',
      icon: 'error-warning-line'
    },
    children: [
      {
        path: '403',
        name: 'Error403',
        component: () => import('../views/403.vue'),
        meta: {
          title: '403',
          icon: 'error-warning-line'
        }
      },
      {
        path: '404',
        name: 'Error404',
        component: () => import('../views/404.vue'),
        meta: {
          title: '404',
          icon: 'error-warning-line'
        }
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    name: 'NotFound',
    hidden: true
  }
]

//是否开启hash模式
const { isHashRouterMode, publicPath } = configOb
const router = createRouter({
  history: isHashRouterMode
    ? createWebHashHistory(publicPath)
    : createWebHistory(publicPath),
  routes: constantRoutes
})

/**
 * 添加路由
 * @param routes
 */
function addRouter (routes:any) {
  routes.forEach((route:any) => {
    if (!router.hasRoute(route.name)) router.addRoute(route)
    if (route.children) addRouter(route.children)
  })
}

export default router