vue-router动态路由权限总结

一、根据后台返回的不同菜单权限，实现不同的菜单展示。如：图一是后台返回给我的一个包含主页权限的menuList列表，然后我们要把图一的列表处理成我们想要的格式的列表，如图二为了方便处理我是按照vue-router格式进行处理的。
图一（处理前数据）：

图二（处理后数据）：

二、
1.以下代码是处理权限列表数据，我是把它写在utils的公共文件内作为公共代码来使用，也可以写在mutation里面，然后存入localstorage防止页面重新加载后数据丢失问题。

 util.mapMenuList = function (info) {
        let list = JSON.parse(JSON.stringify(info));
        info.map((item, index) => {
            list[index] = {
                path: item.url,
                title: item.name,
                name: item.title,
                component: Main,
                children: item.menuDto.map(child => {
                    return {
                        path: child.url.split('/').slice(2).join(''),
                        title: child.name,
                        name: child.title,
                        component: () => import('../views' + item.url + '/' + child.url.split('/').slice(2).join('') + '/' +child.url.split('/').slice(2).join('') + '.vue')
                    }
                })
            }
            router.options.routes.push(list[index])//不是响应式，需手动注入路由，否则this.$router.options.routes内即便进行了addRoutes页不会显示路由列表
        })
        router.addRoutes(list);
        window.localStorage.setItem('initList', JSON.stringify(list));//把处理好的数据存入localstorage
    }
    
    2.数据处理好之后在登录组件内进行调用，因为我们要在登录的时候就把处理好的数据存入localstorage。
    methods: {
                handleSubmit() {
                    this.$refs.loginForm.validate(valid => {
                        if (valid) {
                            const params = this.$qs.stringify(this.form);
                            this.$axios.post("/loan/home/login", params).then(info => {
                                const {data, code, codeMessage} = info.data;
                                this.$store.commit("clearAllTags");
                                if (code === 1) {
                                    const {user, menuList, role} = data;
                                    this.$cookie.set("user", user.name);
                                    this.$cookie.set("userInfo", user);
                                    this.$cookie.set("role", role);
                                    this.$localStorage.set("menuList", JSON.stringify(menuList));//把从后台获取到的权限路由存入本地缓存
                                    util.mapMenuList(menuList);//调用数据处理函数
                                    let route = JSON.parse(window.localStorage.getItem('initList'));
                                    if (route[0].name === 'home') {//判断登录权限是否有主页权限，有的的话登录之后跳到主页，否则跳到欢迎登陆页
                                        this.$router.replace({
                                            path: '/home'
                                        });
                                    } else {
                                        this.$router.replace({
                                            path: '/welcome'
                                        });
                                    }
                                } else {
                                    this.$Message.warning(codeMessage);
                                }
                            });
                        }
                    });
                },
            },

三、数据存好之后我们就可以在组件内进行调用，循环遍历数据进行显示就ok了。

1.从localstorage取数据
mounted() {
        this.routeList = JSON.parse(localStorage.getItem("initList"));
    },


 2.遍历数据进行显示
  
        
    

3.左侧是处理好以后显示的列表

四、还有一个问题就是我们在退出登录的时候要清空所有数据的缓存，包括所有路由以及vuex状态管理里面的数据，否则下次登录的时候会有上次登录的路由缓存信息。我的处理是在退出登录的时候进行页面刷新让整个页面重载一次就ok了
 logout(state, vm) {
            Cookies.remove('user');
            Cookies.remove('password');
            Cookies.remove('access');
            localStorage.clear();
            window.location.reload();//刷新页面重载
        }