vue-router全局路由守卫的使用

最新推荐文章于 2024-08-16 18:42:25 发布

原创最新推荐文章于 2024-08-16 18:42:25 发布 · 863 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue3.0 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Vue Router v4和v3版本中如何使用全局路由守卫进行登录状态和权限检查。在用户未登录时，重定向至登录页面；未授权时，跳转至无权限页面。通过`beforeEach`导航守卫，检查本地存储的用户信息，实现动态路由控制。

全局路由守卫使用场景：控制页面登录，权限控制。

当用户未登录的情况下，都是跳转登录页面；
当用户没有权限时，进入无权限页面；

vue-router v4.版本

详细查看官网：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/home",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/login",
    name: "login",
    component: () => import("../views/LoginPage.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach((to, form, next) => {
  console.log("beforeEach", to, form);
  const obj = sessionStorage.getItem("userInfo") || "{ }";
  const userInfo = JSON.parse(obj);

  // 判断是否登录
  if (Object.keys(userInfo).length) {
    console.log("go");
    next();
  } else {
    if (to.fullPath === "/login") {
      next();
    } else {
      next("/login");
    }
  }
});

export default router;

vue-router v3.版本

详细查询官网：https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

import { Role_List } from "./common/constant";
Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
      meta: {
        role: []
      }
    }
  ]
});

router.beforeEach((to, form, next) => {
  const userInfo = localStorage.getItem("userInfo") || {};
  const routerRoleList = to.meta.role || []; //当前路由具有权限角色list
  if (typeof userInfo.roleId === "number") {
    //当前角色信息
    const currentRoleObj = Role_List.filter(v => v.value === userInfo.roleId)[0];

    if (routerRoleList.includes(userInfo.roleId)) {
      next();
    } else {
      const defaultPath = currentRoleObj.defaultPath;
      next(defaultPath);
    }
  } else {
    //用户接口获取失败时重定向home页
    if (["/"].includes(to.fullPath)) {
      next();
    } else {
      next("/");
    }
  }

  
});
export default router;