vue 后台权限控制多级(3级别路由)路由实现思路

这篇文章主要介绍了Vue 权限控制的两种方法(路由验证)，每种方法给大家介绍的非常详细，具有一定的参考借鉴价值

实现思路

1、登陆 获得token

    @Action({ rawError: true })
    public async Login(userInfo: { username: string, password: string, captcha: string }) {
        let { username, password, captcha } = userInfo
        username = username.trim()
        const { data } = await login({ username, password, captcha })
        setToken(data.token)
        this.SET_TOKEN(data.token)
    }

2、携带token获取用户的信息和菜单权限

@Action
    public async GetUserInfo() {
        if (this.token === '') {
            throw Error('GetUserInfo: token is undefined!')
        }
        const { data } = await getUserInfo({ /* Your params here */ })
        if (!data) {
            throw Error('验证失败请重新登陆.')
        }
        const { roles, nickname, avatar, menus } = data
      
        if (!roles || roles.length <= 0) {
            throw Error('GetUserInfo: roles must be a non-null array!')
        }
        if (menus) {
            this.SET_MENU(menus)
        }
        const avatarUrl = avatar === null ? 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80' : avatar
        this.SET_AVATAR(avatarUrl)
        this.SET_ROLES([...roles, 'admin'])
        this.SET_NAME(nickname)
    }

3、获取到的菜单动态生成路由对象routes

const getSecMenuList = (childrenRouter: any) => {
    const secAuthorityList: Array<RouteConfig> = []
    for (let k = 0; k < childrenRouter.length; k++) {
        const secItems = childrenRouter[k]
        secAuthorityList.push({
            path: secItems.router,
            component: loadView(secItems.path),
            name: secItems.name,
            meta: {
                title: secItems.name,
                icon: 'dashboard',
                roles: ['admin'],
                noCache: true
            },
            children: secItems.children.length > 0 ? getthMenuList(secItems.children) : undefined
        })
    }
    return secAuthorityList
}

4、用vue提供的addRouter（...routes） 吧动态的路由合并到原始的路由对象上。

router.addRoutes(this.dynamicRoutes)

5、把动态生成的路由对象和原始的router.options.routes对象实例进行合并。

router.options.routes = router.options.routes?.concat(this.dynamicRoutes)

整体代码实现

@Action({ rawError: true })
    public async GetRemoteRouter() {
        const adminAuthority = await getMenusList(UserModule.menus)
        this.SET_ROUTES(adminAuthority)
        router.addRoutes(this.dynamicRoutes)
        router.options.routes = router.options.routes?.concat(this.dynamicRoutes)
    }

Vue 动态加载组件的四种方式

使用import导入组件，可以获取到组件

const loadView(view:any){
      return () =>  import(`../components/${view}`)
}

使用import导入组件，直接将组件赋值给componet

var route={
  name:name,
  component : () => import(`../components/${name}`)
}

使用require 导入组件，直接将组件赋值给componet

第一种 使用 require.ensure([],resolve(''))

const loadView(view:any){
     return (resolve:any) => require.ensure([], () => resolve(require(`../components/${view}`)))
}

第二种 使用 (resolve) => require([...url],resolve)

const loadView(view:any){
     return (resolve:any) => require([`../components/${view}`], resolve)
}

第三种 使用 require('url').default

const loadView(view:any){
     return require(`../components/${view}`).default
}

1、三级以上的路由 也是需要给组件的 路由里面放<router-view></router-view>

2、这里我在做的时候踩了坑，当时routes目录对象里面没有给component ,结果子路由就没办法显示。后来加了一个组件就可以了。

3、后来总结了下。路由routes里面凡事遇到大于二级的。即children个数大于二的。都需要给路由容器，不然自路由没有办法显示。