开发喵星球

在若依框架中，默认情况下所有页面都需要用户登录后才能访问。为了实现某些页面可以跳过登录直接访问，需要对前端路由和权限控制进行配置。

解决思路

1. 在permission.js文件中添加需要跳过登录的路由地址到白名单（whiteList）。
2. 在router/index.js文件中添加静态公共路由地址，使其在路由配置中生效。

项目结构

ruoyi-ui
├── src
│   ├── permission.js
│   ├── router
│   │   └── index.js

具体操作

第一步：在permission.js文件里的whiteList添加路由地址

打开ruoyi-ui\src\permission.js文件，在whiteList数组中添加需要跳过登录的路由地址。例如，添加'/system/role'：

const whiteList = ['/login', '/register', '/system/role'] // no redirect whitelist

第二步：在router/index.js文件里添加静态公共路由地址

打开ruoyi-ui\src\router\index.js文件，添加静态公共路由地址。例如，添加'/system/role'的路由配置：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login'),
    hidden: true
  },
  {
    path: '/register',
    component: () => import('@/views/register'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true
  },
  {
    path: '/system/role',
    component: () => import('@/views/system/role/index'),
    hidden: true
  }
  ···
]
···

运行结果

通过上述步骤，成功实现了在若依框架中跳过登录访问指定页面（如/system/role）。访问该页面时，不再需要进行登录验证。