Vue根据接口返回权限和动态路由，来配置路由组件

最新推荐文章于 2024-09-11 17:04:07 发布

小七:

最新推荐文章于 2024-09-11 17:04:07 发布

阅读量2k

点赞数

分类专栏：权限配置路由动态路由权限配置文章标签： vue.js javascript

本文链接：https://blog.csdn.net/xyqseven/article/details/107109648

版权

本文介绍如何在Vue项目中，依据登录接口返回的权限信息动态配置路由组件。在`router/index.js`中处理登录接口`api/login.js`的返回数据，并利用Vuex的action管理动态路由。当存在多个身份对应的路由时，登录接口处可做相应配置。此方法适用于Vue 2.3及以上版本。

摘要由CSDN通过智能技术生成

首先再router/index.js中

import Vue from 'vue'
import Router from 'vue-router'
import {
    getLogin } from '@/api/login' //登录接口

const Main = () => import('@/pages/index')
const Login = () => import('@/pages/login/login')
const Home = () => import('@/pages/data/home')
const Page404 = () => import('@/pages/404/page-404')
const NoAccess = () => import('@/pages/no-access/no-access')

//这是你要使用的路由 要是存在多组不同路由可以一样配置
export const routeList = [
  {
   
    path: '/',
    name: 'Main',
    component: Main,
    redirect: {
   name: 'Home'},
    meta: {
   requiresAuth: false},
    children: [{
   
      path: '/home',
      name: 'Home',
      component: Home,
      meta: {
   requiresAuth: false,
        activeLeft: 'Home',
        activeTop: 'Home'}
    }]
  },
  {
   
    path: '/login',
    name: 'Login',
    component: Login,
    meta: {
   requiresAuth: false}
  },
  {
   
    path: '/page-404',
    name: 'Page404',
    component: Page404,
    meta: {
   requiresAuth: false}
  }
]
let routeList0 = []

// 系统默认
const routeList2 = [
  {
   
    path: '/',
    redirect: '/login',
    component: Login
  },
  {
   
    path: '/login',
    name: 'Login',
    component: Login,
    meta: