当前位置: 首页 > article >正文

vue3-element-admin 去掉登录

1.src/router/index 去掉登录路由

  // {
  //   path: "/login",
  //   component: () => import("@/views/login/index.vue"),
  //   meta: { hidden: true },
  // },

2./src/plugins/permission修改 未登录

import type {
  NavigationGuardNext,
  RouteLocationNormalized,
  RouteRecordRaw,
} from "vue-router";

import NProgress from "@/utils/nprogress";
import { isLogin } from "@/utils/auth";

import router from "@/router";
import { usePermissionStore, useUserStore } from "@/store";

export function setupPermission() {
  // 白名单路由
 const whiteList = ["/login"];

  router.beforeEach(async (to, from, next) => {
        NProgress.start();
        
    if (isLogin()) {
      if (to.path === "/login") {
        // 如果已登录,跳转到首页
        next({ path: "/" });
        NProgress.done();
      } else {
        const userStore = useUserStore();
        const hasRoles =
        userStore.user.roles && userStore.user.roles.length > 0;
        if (hasRoles) {
          // 如果未匹配到任何路由,跳转到404页面
          if (to.matched.length === 0) {
            next(from.name ? { name: from.name } : "/404");
          } else {
            // 如果路由参数中有 title,覆盖路由元信息中的 title
            const title =
              (to.params.title as string) || (to.query.title as string);
            if (title) {
              to.meta.title = title;
            }
            next();
          }
        } else {
          const permissionStore = usePermissionStore();
          try {
            await userStore.getUserInfo();
            const dynamicRoutes = await permissionStore.generateRoutes();
            dynamicRoutes.forEach((route: RouteRecordRaw) =>
              router.addRoute(route)
            );
            next({ ...to, replace: true });
          } catch (error) {
            console.error(error);
            // 移除 token 并重定向到登录页,携带当前页面路由作为跳转参数
            await userStore.resetToken();
            redirectToLogin(to, next);
            NProgress.done();
          }
        }
      }
    } else {
      // 未登录
      if (whiteList.includes(to.path)) {
        // 在白名单,直接进入
        next(); 
      } else {
        // 不在白名单,重定向到登录页
        const permissionStore = usePermissionStore();
        const dynamicRoutes = await permissionStore.generateRoutes();
        dynamicRoutes.forEach((route: RouteRecordRaw) =>
          router.addRoute(route)
        );
        next(); 
        //redirectToLogin(to, next);
        NProgress.done();
      }
    }
  });

  router.afterEach(() => {
    NProgress.done();
  });
}

/** 重定向到登录页 */
function redirectToLogin(
  to: RouteLocationNormalized,
  next: NavigationGuardNext
) {
  const params = new URLSearchParams(to.query as Record<string, string>);
  const queryString = params.toString();
  const redirect = queryString ? `${to.path}?${queryString}` : to.path;
  next(`/login?redirect=${encodeURIComponent(redirect)}`);
}

/** 判断是否有权限 */
export function hasAuth(
  value: string | string[],
  type: "button" | "role" = "button"
) {
  const { roles, perms } = useUserStore().user;

  // 超级管理员 拥有所有权限
  if (type === "button" && roles.includes("ROOT")) {
    return true;
  }

  const auths = type === "button" ? perms : roles;
  return typeof value === "string"
    ? auths.includes(value)
    : value.some((perm) => auths.includes(perm));
}

3.src/store/moudles/permission 修改generateRoutes

  /**
   * 生成动态路由
   */
  function generateRoutes() {
    return import('@/router').then(({ constantRoutes }) => {
      routes.value  = constantRoutes;
      return constantRoutes;
    });
    // return new Promise<RouteRecordRaw[]>((resolve, reject) => {
    //   MenuAPI.getRoutes()
    //     .then((data) => {
    //       const dynamicRoutes = transformRoutes(data);
    //       routes.value = constantRoutes.concat(dynamicRoutes);
    //       resolve(dynamicRoutes);
    //     })
    //     .catch((error) => {
    //       reject(error);
    //     });
    // });
  }

http://www.kler.cn/a/375587.html

相关文章:

  • uniapp学习(010-2 实现抖音小程序上线)
  • springboot 整合 抖音 移动应用 授权
  • java多变接口
  • 缓存使用的最佳实践,自定义缓存工具类
  • Java面试经典 150 题.P55. 跳跃游戏(009)
  • MySQL MHA 的部署
  • Docker Compose入门学习——下载、授权、创建文件、定义服务
  • 创建一个基于SSM(Spring, Spring MVC, MyBatis)的教学视频点播系统
  • Sigrity Power SI Multiple Structure Simulation模式如何进行跨板级联仿真操作指导(一)
  • npm install -g @vue/cil 非常卡慢
  • linux alsa-lib snd_pcm_open函数源码分析(一)
  • 腾讯云数据库TDSQL:数据库界的“高架桥”
  • 【论文阅读】Associative Alignment for Few-shot Image Classification
  • ESP-IDF HTTP POST请求发送音频-启明云端乐鑫代理商
  • 【机器学习】21. Transformer: 最通俗易懂讲解
  • 优化低代码开发平台用户体验:功能树导航设计探讨
  • 穷举vs暴搜vs深搜vs回溯vs剪枝 算法专题
  • #渗透测试#SRC漏洞挖掘# 操作系统-windows系统
  • C++设计模式结构型模式———桥接模式
  • watch 和 computed 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】
  • MySQL锁——针对实习面试
  • 【华为HCIP实战课程二十九】中间到中间系统协议IS-IS邻居关系建立和LSP详解,网络工程师
  • 关于武汉芯景科技有限公司的马达驱动芯片AT6237开发指南(兼容DRV8837)
  • BO-Transformer-LSTM多特征分类预测/故障诊断(Matlab实现)
  • Spring Boot 跨域解决方案
  • 星光校园之恋