移除登录

适用场景

本指南适用于不需要登录验证的场景，如数据大屏、公开展示页、简单内容管理等。

背景说明

vue3-element-admin 默认开启登录验证，访问任何页面都需要先登录。但在某些场景下，登录功能是不必要的：

• 📊 数据大屏 - 公开展示的数据看板
• 📄 静态展示 - 简单的内容管理系统
• 🎨 原型演示 - 快速搭建原型进行演示
• 🧪 开发调试 - 临时移除登录方便调试

前提条件

重要提示

移除登录通常需要配合静态路由使用。如果仍然依赖动态路由，移除登录就没有意义。建议先阅读：

• 移除动态路由

改造步骤

第一步：修改路由守卫

修改 src/plugins/permission.ts 文件，完全移除登录校验逻辑：

修改前

// src/plugins/permission.ts
import router from '@/router'
import { useUserStore, usePermissionStore } from '@/store'
import NProgress from '@/utils/nprogress'
import { getToken } from '@/utils/auth'

export function setupPermission() {
  router.beforeEach(async (to, from, next) => {
    NProgress.start()

    const isLogin = !!getToken()

    if (isLogin) {
      // 已登录逻辑
      if (to.path === '/login') {
        next({ path: '/' })
      } else {
        const permissionStore = usePermissionStore()
        if (permissionStore.isRoutesLoaded) {
          if (to.matched.length === 0) {
            next('/404')
          } else {
            next()
          }
        } else {
          try {
            const dynamicRoutes = await permissionStore.generateRoutes()
            dynamicRoutes.forEach((route) => router.addRoute(route))
            next({ ...to, replace: true })
          } catch (error) {
            console.error(error)
            await useUserStore().clearUserData()
            next({ path: '/login', query: { redirect: to.path } })
          }
        }
      }
    } else {
      // 未登录逻辑
      const whiteList = ['/login']
      if (whiteList.includes(to.path)) {
        next()
      } else {
        next({ path: '/login', query: { redirect: to.path } })
      }
    }
  })

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

修改后

// src/plugins/permission.ts
import router from '@/router'
import { usePermissionStore } from '@/store'
import NProgress from '@/utils/nprogress'

export function setupPermission() {
  // 前置守卫
  router.beforeEach(async (to, from, next) => {
    NProgress.start()

    // 生成路由菜单（静态路由）
    usePermissionStore().generateRoutes()

    // 路由未匹配，跳转 404
    if (to.matched.length === 0) {
      next('/404')
    } else {
      // 动态设置页面标题
      const title = (to.params.title as string) || (to.query.title as string)
      if (title) {
        to.meta.title = title
      }
      next()
    }
  })

  // 后置守卫
  router.afterEach(() => {
    NProgress.done()
  })
}

核心变化

1. 移除了 getToken() 登录状态检查
2. 移除了 whiteList 白名单逻辑
3. 移除了登录跳转逻辑
4. 保留了路由匹配和 404 处理

第二步：简化路由生成

修改 src/store/modules/permission.ts，使用静态路由：

// src/store/modules/permission.ts
import { defineStore } from 'pinia'
import { constantRoutes } from '@/router'
import type { RouteRecordRaw } from 'vue-router'

export const usePermissionStore = defineStore('permission', () => {
  const routes = ref<RouteRecordRaw[]>([])

  /**
   * 生成静态路由（用于菜单显示）
   */
  function generateRoutes() {
    routes.value = constantRoutes
  }

  return {
    routes,
    generateRoutes
  }
})

第三步：移除登录页路由（可选）

如果完全不需要登录功能，可以从路由配置中移除登录页：

// src/router/index.ts
export const constantRoutes: RouteRecordRaw[] = [
  // 移除或注释掉登录路由
  // {
  //   path: '/login',
  //   component: () => import('@/views/login/index.vue'),
  //   meta: { hidden: true }
  // },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        name: 'Dashboard',
        meta: {
          title: 'dashboard',
          icon: 'homepage',
          affix: true,
          keepAlive: true
        }
      }
    ]
  },

  // ... 其他路由
]

第四步：移除 Token 相关逻辑（可选）

如果完全移除登录，可以清理 Token 相关代码：

1. 移除请求拦截器中的 Token

// src/utils/request.ts
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // 移除 Token 注入
    // const token = getToken()
    // if (token) {
    //   config.headers.Authorization = `Bearer ${token}`
    // }
    return config
  },
  (error: AxiosError) => {
    return Promise.reject(error)
  }
)

2. 移除响应拦截器中的登录跳转

// src/utils/request.ts
service.interceptors.response.use(
  (response: AxiosResponse) => {
    // 成功响应处理
    return response.data
  },
  (error: AxiosError) => {
    // 移除 401 登录跳转
    // if (error.response?.status === 401) {
    //   ElMessage.error('登录已过期，请重新登录')
    //   router.push('/login')
    // }
    return Promise.reject(error)
  }
)

第五步：调整布局组件（可选）

移除顶部的用户信息和退出登录：

<!-- src/layout/components/Navbar.vue -->
<template>
  <div class="navbar">
    <hamburger />
    <breadcrumb />
    
    <div class="right-menu">
      <!-- 保留需要的功能 -->
      <size-select />
      <lang-select />
      <fullscreen />
      
      <!-- 移除用户下拉菜单 -->
      <!-- <el-dropdown>
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar" />
          <el-icon><CaretBottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown> -->
    </div>
  </div>
</template>

进阶配置

保留部分页面的登录验证

如果只想部分页面免登录，可以使用白名单：

// src/plugins/permission.ts
router.beforeEach(async (to, from, next) => {
  NProgress.start()

  // 定义免登录白名单
  const whiteList = ['/dashboard', '/public', '/about']

  if (whiteList.includes(to.path)) {
    // 白名单内的页面直接放行
    next()
  } else {
    // 其他页面仍需登录
    const isLogin = !!getToken()
    if (isLogin) {
      next()
    } else {
      next({ path: '/login', query: { redirect: to.path } })
    }
  }
})

保留用户信息展示

如果需要展示用户信息（但不需要登录），可以使用模拟数据：

// src/store/modules/user.ts
export const useUserStore = defineStore('user', () => {
  const userInfo = ref({
    username: '访客用户',
    nickname: 'Guest',
    avatar: 'https://example.com/default-avatar.png',
    roles: ['guest']
  })

  return {
    userInfo
  }
})

后端接口处理

移除登录后，后端接口也需要相应调整：

方式一：移除鉴权

后端接口不再验证 Token，允许匿名访问：

// Spring Security 配置示例
@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
        .antMatchers("/**").permitAll()  // 允许所有接口匿名访问
        .and()
        .csrf().disable();
}

方式二：使用固定 Token

前端请求时带上固定的 Token（适合测试环境）：

// src/utils/request.ts
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // 使用固定 Token
    config.headers.Authorization = 'Bearer your-fixed-token-here'
    return config
  }
)

方式三：后端提供默认用户

后端判断如果没有 Token，自动分配一个默认用户：

// Java 示例
@GetMapping("/api/user/info")
public Result getUserInfo(@RequestHeader(required = false) String authorization) {
    if (StringUtils.isEmpty(authorization)) {
        // 返回默认用户信息
        return Result.success(getDefaultUser());
    }
    // 正常的用户信息获取逻辑
    return Result.success(getUserByToken(authorization));
}

优缺点分析

优点

• ✅ 快速开发 - 无需处理登录注册逻辑
• ✅ 简化流程 - 减少用户操作步骤
• ✅ 便于演示 - 快速展示系统功能
• ✅ 降低复杂度 - 前后端都更简单

缺点

• ❌ 无安全性 - 所有数据完全公开
• ❌ 无权限控制 - 无法区分不同用户
• ❌ 不适合生产 - 仅适合特定场景

适用场景

✅ 适合移除登录

• 数据大屏展示
• 公开信息查询
• 静态内容管理
• 开发阶段快速调试
• 原型演示
• 学习研究项目

❌ 不适合移除登录

• 生产环境系统
• 涉及敏感数据
• 多用户协作
• 需要权限控制
• 需要审计日志

测试验证

完成改造后，验证以下功能：

1. 首页直接访问 - 无需登录即可访问 /dashboard
2. 菜单正常显示 - 侧边栏菜单正常展示
3. 页面跳转正常 - 各页面间跳转无阻碍
4. 接口调用正常 - 后端接口能正常响应（确保后端也做了相应调整）
5. 404 页面 - 访问不存在的路由正确跳转到 404

恢复登录功能

如果需要恢复登录功能，按照以下步骤：

1. 恢复 permission.ts 中的登录校验逻辑
2. 恢复路由配置中的 /login 路由
3. 恢复请求拦截器中的 Token 注入
4. 恢复布局组件中的用户信息展示
5. 恢复后端的鉴权逻辑

建议

使用 Git 分支管理，保留原始代码分支，方便随时切换。

完整示例

查看完整的免登录配置示例：

• 免登录分支示例
• 默认配置（带登录）

常见问题

1. 移除登录后，如何模拟不同用户？

可以在代码中切换模拟用户：

const mockUser = ref({
  admin: { username: 'admin', role: 'admin' },
  editor: { username: 'editor', role: 'editor' },
  guest: { username: 'guest', role: 'guest' }
})

const currentUser = ref(mockUser.value.admin)

2. 如何临时禁用登录进行调试？

在 permission.ts 中添加开关：

const DISABLE_LOGIN = import.meta.env.VITE_DISABLE_LOGIN === 'true'

router.beforeEach(async (to, from, next) => {
  if (DISABLE_LOGIN) {
    // 免登录逻辑
    next()
  } else {
    // 正常登录逻辑
  }
})

在 .env.development 中配置：

VITE_DISABLE_LOGIN=true

3. 移除登录后性能有提升吗？

有一定提升：

• 减少了登录接口请求
• 减少了 Token 验证时间
• 首次访问更快

总结

移除登录适合无需用户验证的特定场景。如果你的项目符合以下特点，可以考虑移除登录：

1. 数据完全公开，无敏感信息
2. 单用户使用或不需要区分用户
3. 快速搭建原型或演示
4. 开发阶段临时调试

对于生产环境的管理系统，强烈建议保留登录功能以确保数据安全。

相关文档

• 移除动态路由 - 通常需要先移除动态路由
• 权限管理 - 了解完整的权限体系
• 路由配置 - 路由配置详解