Vue 实现动态路由及登陆&404页面跳转控制&页面刷新空白解决方案

Vue实现动态路由及登陆&404页面跳转控制&页面刷新空白解决方案

 

by:授客 QQ：1033553122

 

开发环境

 

Win 10

 

Vue 2.9.6

 

node-v10.15.3-x64.msi

下载地址：

https://nodejs.org/en/

 

代码片断(router/index.js)

说明：代码中动态路由的获取是经过解析菜单资源获取的

import Vue from "vue";

import Router from "vue-router";

 

import store from "@/store";

import Index from "@/views/Index";

import api from "@/common/network/api";

import Login from "@/views/Login";

import NotFound from "@/views/Error/404";

 

import Cookies from "js-cookie";

 

Vue.use(Router);

 

// 静态路由

conststaticRoute = [

  {

    path: "/",

    name: "Index",

    component: Index

  },

  {

    path: "/login",

    name: "登陆",

    component: Login

  },

  {

    path: "/error/404",

    name: "notFound",

    component: NotFound

  }

];

 

const router = new Router({

  mode: "history", //  去掉 http://localhost:8080/#的#

  routes: staticRoute

});

 

/*vue是单页应用，刷新时，从新建立实例，须要从新加载的动态路由，否则匹配不到路由，出现页面空白的状况*/

router.beforeEach((to, from, next) => {

  // let userId = sessionStorage.getItem("userId") // 登陆界面登陆成功以后，会把用户信息保存在会话 // 关闭浏览器tab标签页，从新打开一个tab页，从新访问该站点，这时会开启一个新的会话，原先登陆后保存的userId丢失

  let token = Cookies.get("token"); // 仅登陆状况才存在token

  if (to.path === "/login") {

    // 若是是访问登陆界面，若是token存在，表明已登陆过，跳转到主页

    if (token) {

      next({ path: "/" });

    } else {

      // 不然，跳转到登陆页面

      next();

    }

  } else {

    if (to.meta.requireAuth) {

      // 若是访问非登陆界面,且路由须要登陆

      if (!token) {

        // 用户token不存在，表明未登陆，跳转登陆

        next({

          path: "/login",

          query: { redirect: to.fullPath } // 把要跳转的路由path做为参数，登陆成功后跳转到该路由

        });

      } else {

        // 用户已登陆，添加动态菜单和路由后直接跳转

        addDynamicMenuAndRoutes(to, from, next);

        // 注释掉一下代码是addDynamicMenuAndRoutes函数中axios异步请求获取菜单，请求还没返回结果就开始执行next()函数，这样会致使重复请求菜单资源，特别是登陆的时候，会发送两次请求，解决方案就是把如下注释掉的代码放到动态添加菜单和路由方法里执行

        //next()

 

        //if (to.matched.length == 0) {

        //  router.push(to.path)

        //}

      }

    } else {

      // 不须要登陆，添加动态菜单和路由后，直接跳转

      addDynamicMenuAndRoutes(to, from, next);

    }

  }

});

 

/**

 * 加载动态菜单和路由

 */

function addDynamicMenuAndRoutes(userName, to, from, next) {

  if (store.state.app.menuRouteLoaded) {

    console.log("动态菜单和路由已经存在.");

    next();

    return;

  }

 

  //优先从本地sessionStorage获取

  let navMenuData = sessionStorage.getItem("navMenuData");

  if (navMenuData) {

    navMenuData = JSON.parse(navMenuData);

    // 获取动态路由

    let dynamicRoutes = getDynamicRoutes(navMenuData);

 

    // 设置获取的路由所有为根路由(path值为 "/")下的子路由

    // 这里，根据静态路由配置可知router.options.routes[0]为根路由

    router.options.routes[0].children = [].concat(dynamicRoutes);

    // 这里为啥不把 * 匹配放到静态路由的最后面，是由于若是放置在静态路由最后面，做为一级路由，当url同前面的路由都不匹配时，会匹配到 *，这样一来，刷新页面时，因为还没加载动态路由，预期和动态路由匹配的url，会匹配到静态路由的 *，而后跳转404页面。

    if (router.options.routes[router.options.routes.length - 1].path != "*") {

      router.options.routes = router.options.routes.concat([

        {

          path: "*",

          name: "notFound",

          component: NotFound

        }

      ]);

    }

 

    // 添加路由，让路由生效

    router.addRoutes(router.options.routes);

 

    // 存储导航菜单list数据

    store.commit("setNavMenu", navMenuData);

 

    // 设置菜单为已加载状态

    store.commit("setMenuRouteLoadStatus", true);

    next();

    if (to.matched.length == 0) {

      router.push(to.path);

    }

  } else {

    // 本地sessionStorage获取不到，从服务器端读取

    api.menu

      .getNavMenuData()

      .then(res => {

        // 获取动态路由

        let dynamicRoutes = getDynamicRoutes(res.data);

 

        // 添加路由

        router.options.routes[0].children = [].concat(dynamicRoutes);

 

        // 若是要添加为一级路由，则按以下方式拼接路由

        // router.options.routes = staticRoute.concat(dynamicRoutes)

 

        // 注意，如下写法会致使添加的路由不起做用，为错误的写法

        // let otherVar=staticRoute.concat(dynamicRoutes)

        // router.addRoutes(otherVar); //添加的路由不起做用

 

        if (

          router.options.routes[router.options.routes.length - 1].path != "*"

        ) {

          router.options.routes = router.options.routes.concat([

            {

              path: "*",

              name: "notFound",

              component: NotFound

            }

          ]);

        }

 

        router.addRoutes(router.options.routes); //会产生重复路由，控制台会有warn提示，可是不影响，vue-router会自动去重，

 

        // 存储导航菜单list数据

        sessionStorage.setItem("navMenuData", JSON.stringify(res.data));

        store.commit("setNavMenu", res.data);

 

        // 设置菜单为已加载状态

        store.commit("setMenuRouteLoadStatus", true);

 

        next(); /* 注意:路由匹配是在router.addRoutes以前完成的，因此，即使使用router.addRoutes添加动态路由，也会出现to.matched.length也会等于0的状况，即没匹配到路由，因此to.matched.length等于0的状况下，再次执行router.push(to.path)，这样，再次触发beforeEach函数调用)*/

        if (to.matched.length == 0) {

          router.push(to.path);

        }

      })

      .then(res => {

        // 保存用户权限标识集合

      })

      .catch(function(res) {

        console.log(res);

      });

  }

}

 

/**

 * 获取动态(菜单)路由配置

 * @param {*} menuList菜单列表

 * @param {*} routes递归建立的动态(菜单)路由

 */

function getDynamicRoutes(menuList = [], parentRoute = []) {

  for (var i = 0; i < menuList.length; i++) {

    var route = {}; // 存放路由配置

    if (menuList[i].url && /\S/.test(menuList[i].url)) {

      // url不为空，且包含任何非空白字符

      route = {

        path: menuList[i].url,

        component: null,

        name: menuList[i].name,

        children: [],

        meta: {

          icon: menuList[i].icon,

          index: menuList[i].id,

          requireAuth: menuList[i].requireAuth // 可选值true、false 添加该字段，表示进入这个路由是须要登陆的

        }

      };

 

      try {

        // 根据菜单URL动态加载vue组件，这里要求vue组件须按照url路径存储

        // 如url="sys/user"，则组件路径应是"@/views/sys/user.vue",不然组件加载不到

        let array = [];

        if (menuList[i].url.startsWith("/")) {

          // 若是url 以 "/"打头，因此要先去掉左侧的 "/"，不然组件路径会出现 @/views//sys/user的状况

          array = menuList[i].url.substring(1).split("/");

        } else {

          array = menuList[i].url.split("/");

        }

 

        let url = ""; // 存放url对应的组件路径

 

        // 组件所在目录及组件名称第一个字母大写，因此须要替换

        for (let i = 0; i < array.length; i++) {

          url +=

            array[i].substring(0, 1).toUpperCase() +

            array[i].substring(1) +

            "/";

        }

        url = url.substring(0, url.length - 1); // 去掉最右侧的 '/'

        route["component"] = resolve => require([`@/views/${url}`], resolve);

      } catch (e) {

        console.log("根据菜单URL动态加载vue组件失败：" + e);

      }

 

      if (menuList[i].children && menuList[i].children.length >= 1) {

        getDynamicRoutes(menuList[i].children, route["children"]);

      }

    } else {

      if (menuList[i].children && menuList[i].children.length >= 1) {

        getDynamicRoutes(menuList[i].children, parentRoute);

      }

    }

    if (JSON.stringify(route) != "{}") {

      parentRoute.push(route);

    }

  }

  return parentRoute;

}

 

export default router;

 

 

 

代码片断(src/Login.vue)

methods: {

    login() {

        let userInfo = {

            account:this.loginForm.account,

            password:this.loginForm.password,

            captcha:this.loginForm.captcha

        };

        this.$api.login.login(userInfo)

        .then(res=> {

            if (res.success) {

                Cookies.set("token", res.data.token); // 保存token到Cookie

                sessionStorage.setItem("userName", userInfo.account); // 保存用户信息到本地会话

                this.$store.commit("setMenuRouteLoadStatus", false); // 重置导航菜单加载状态为false

                if (JSON.stringify(this.$route.query) != "{}") { // 不须要跳转到登陆前的页面

                    this.$router.push(this.$route.query.redirect); // 登陆成功，跳转以前页面

                 } else {

                    this.$router.push("/")

                 }

            } else {

                this.$message({

                    message:res.msg,

                    type:"error"

                });

            }

            this.loading = false;

        })

        .catch(res=> {

            this.$message({

                message:res.message,

                type:"error"

            });

        });

    },

 

菜单数据

data: [{

        id: 1,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "首页",

        url: "/home",

        perms: null,

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 1,

        level: 0,

        children: [{

                id: 2,

                createBy: null,

                createTime: null,

                lastUpdateBy: null,

                lastUpdateTime: null,

                parentId: 1,

                parentName: null,

                name: "首页二级菜单1",

                url: "",

                perms: null,

                requireAuth: true,

                type: 1,

                icon: "fa fa-home fa-lg",

                orderNum: 1,

                level: 0,

                children: [{

                        id: 3,

                        createBy: null,

                        createTime: null,

                        lastUpdateBy: null,

                        lastUpdateTime: null,

                        parentId: 2,

                        parentName: null,

                        name: "首页三级菜单1",

                        url: "",

                        perms: null,

                        requireAuth: true,

                        type: 1,

                        icon: "fa fa-home fa-lg",

                        orderNum: 1,

                        level: 0,

                        children: [{

                            id: 4,

                            createBy: null,

                            createTime: null,

                            lastUpdateBy: null,

                            lastUpdateTime: null,

                            parentId: 3,

                            parentName: null,

                            name: "首页四级菜单1",

                            url: "/home/level4Menu1",

                            perms: null,

                            requireAuth: true,

                            type: 0,

                            icon: "fa fa-home fa-lg",

                            orderNum: 1,

                            level: 0,

                            children: []

                        }]

                    },

                    {

                        id: 5,

                        createBy: null,

                        createTime: null,

                        lastUpdateBy: null,

                        lastUpdateTime: null,

                        parentId: 2,

                        parentName: null,

                        name: "首页三级菜单2",

                        url: "/home/level3Menu2",

                        perms: null,

                        requireAuth: true,

                        type: 0,

                        icon: "fa fa-home fa-lg",

                        orderNum: 2,

                        level: 0,

                        children: []

                    }

                ]

            },

            {

                id: 6,

                createBy: null,

                createTime: null,

                lastUpdateBy: null,

                lastUpdateTime: null,

                parentId: 1,

                parentName: null,

                name: "首页二级菜单2",

                url: "",

                perms: null,

                requireAuth: true,

                type: 1,

                icon: "fa fa-home fa-lg",

                orderNum: 2,

                level: 0,

                children: [{

                    id: 7,

                    createBy: null,

                    createTime: null,

                    lastUpdateBy: null,

                    lastUpdateTime: null,

                    parentId: 6,

                    parentName: null,

                    name: "首页三级菜单3",

                    url: "/home/level3Menu3",

                    perms: null,

                    requireAuth: true,

                    type: 0,

                    icon: "fa fa-home fa-lg",

                    orderNum: 1,

                    level: 0,

                    children: []

                }]

            }

        ]

    },

    {

        id: 8,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "工做台",

        url: "/workbench",

        perms: null,

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 2,

        level: 0,

        children: []

    },

    {

        id: 9,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "测试视图",

        url: "/testerView",

        perms: null,

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 3,

        level: 0,

        children: [{

            id: 10,

            createBy: null,

            createTime: null,

            lastUpdateBy: null,

            lastUpdateTime: null,

            parentId: 9,

            parentName: null,

            name: "测试视图二级菜单1",

            url: "",

            perms: null,

            requireAuth: true,

            type: 1,

            icon: "fa fa-home fa-lg",

            orderNum: 1,

            level: 0,

            children: [{

                    id: 11,

                    createBy: null,

                    createTime: null,

                    lastUpdateBy: null,

                    lastUpdateTime: null,

                    parentId: 10,

                    parentName: null,

                    name: "测试视图三级菜单1",

                    url: "/testerView/level3Menu1",

                    requireAuth: true,

                    type: 0,

                    icon: "fa fa-home fa-lg",

                    orderNum: 1,

                    level: 0,

                    children: []

                },

                {

                    id: 12,

                    createBy: null,

                    createTime: null,

                    lastUpdateBy: null,

                    lastUpdateTime: null,

                    parentId: 10,

                    parentName: null,

                    name: "测试视图三级菜单2",

                    url: "/testerView/level3Menu2",

                    requireAuth: true,

                    type: 0,

                    icon: "fa fa-home fa-lg",

                    orderNum: 2,

                    level: 0,

                    children: []

                }

            ]

        }]

    },

    {

        id: 13,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "配置",

        url: "/settings",

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 4,

        level: 0,

        children: []

    },

    {

        id: 14,

        createBy: null,

        createTime: null,

        lastUpdateBy: null,

        lastUpdateTime: null,

        parentId: 0,

        parentName: null,

        name: "其它",

        url: "",

        requireAuth: true,

        type: 0,

        icon: "fa fa-home fa-lg",

        orderNum: 5,

        level: 0,

        children: [{

            id: 15,

            createBy: null,

            createTime: null,

            lastUpdateBy: null,

            lastUpdateTime: null,

            parentId: 14,

            parentName: null,

            name: "其它菜单",

            url: "/other",

            requireAuth: true,

            type: 0,

            icon: "fa fa-home fa-lg",

            orderNum: 1,

            level: 0,

            children: []

        }]

    }

]

参考连接

https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html