当前位置：首页 > news >正文

商盈网站建设网站优化排名工具

news 2025/7/29 4:00:51

商盈网站建设,网站优化排名工具,如何制作论坛网站,电子商城是什么意思前言403 页面通常表示无权限访问，与 404 页面代表着不同含义。而大部分管理后台框架仅提供了 404 页面的支持，但却忽略了对 403 页面的处理，有的框架虽然也有对 403 页面的处理，但处理效果却不尽人意。那怎么样的 403 页面才是即好…

前言

403 页面通常表示无权限访问，与 404 页面代表着不同含义。而大部分管理后台框架仅提供了 404 页面的支持，但却忽略了对 403 页面的处理，有的框架虽然也有对 403 页面的处理，但处理效果却不尽人意。

那怎么样的 403 页面才是即好用，又优雅呢？

其他框架是怎么做的

1、完全不处理

不处理的结果就是无访问权限的页面大概率会进入 404 页面的逻辑。

因为这类框架通常在路由注册前就把无访问权限的路由直接剔除了，所以当用户访问了一个无访问权限的路由，对系统来说，它就是一个不存在的路由，从而进入到 404 页面。

那弊端是什么呢？那就是用户没办法区分他想访问的这个页面，到底是因为权限不够，还是地址错误，会给用户造成一定的使用困惑。

2、稍稍处理

稍稍处理的方式和第一种思路不太一样，这类框架在路由注册前并不会对路由数据做处理，而是在路由导航守卫里去判断是否有权限访问路由，如果没有权限则进入到预先注册好的 403 页面地址。

这种方案的优势在于它区分了 404 和 403 页面，因为即便是无访问权限的路由，也是真实注册到了路由实例上，只是在访问时做了鉴权和重定向。

那弊端又是什么呢？那就是用户虽然知道了当前页面无访问权限，但却看不到页面的真实地址，因为已经被重定向到 403 页面上了，用户体验稍微欠缺了一点，就像下图这样：

我是怎么做的

先稍微思考一下方案，首先刚才第一种方案剔除无访问权限的路由肯定不行，无访问权限的路由必须得注册，这样才能和 404 页面做出区分；其次第二种方案在导航守卫里做重定向也不行，不能重定向，要保证路由地址还是原来的地址，但页面要展示 403 页面的内容。

于是，方案就出来了，那就是在路由注册前，将无访问权限的路由的 component 直接替换成 403 页面组件不就可以了么。这么一来，路由还是那个路由，只是对应的页面组件不一样了，既区分了 404 和 403 页面，还保留 403 页面的原始路由地址。

用代码来描述大致就是：

// 原始路由数据
[{path: '/permission',component: () =>import('@/layouts/index.vue'),children: [{path: 'index',component: () =>import('@/views/list1.vue'),meta: {auth: 'admin'// 鉴权字段，如果为 admin 时则可以访问}}]}
]// 假设用户权限为 test ，处理过后的路由数据
[{path: '/permission',component: () =>import('@/layouts/index.vue'),children: [{path: 'index',component: () =>import('@/views/403.vue'), // 注意看这里，替换成了 403 页面组件meta: {auth: 'admin'}}]}
]

实际效果就是这样：

可以看到，当账号从 admin 切换到 test 后，由于 test 账号不具备访问权限，所以页面显示为 403 页面，与此同时，页面的 URL 地址依旧还是原始的地址，达到了预期的效果。

这就够了么？

当然没有，因为 404 页面是通过以下方式做的兜底处理：

{path: '/:all(.*)*',component: () =>import('@/views/404.vue')
}

由于它并不是一个多级路由的结构，这就导致 404 页面和 403 页面的展示有一点差别，404 页面是整页显示，403 页面是局部显示：

而我希望是能和 404 页面保持一致，也就是让 403 页面也进行整屏显示。

处理起来也不复杂，无非是在路由注册前，将无访问权限的多级路由转成一级路由就可以啦，当然处理过程会使用到递归，以及需要将多级路由的 path 进行合并，从代码来描述大致就是这样：

// 原始路由数据
[{path: '/permission',component: () =>import('@/layouts/index.vue'),children: [{path: 'index',component: () =>import('@/views/list1.vue'),meta: {auth: 'admin'// 鉴权字段，如果为 admin 时则可以访问}}]}
]// 假设用户权限为 test ，处理过后的路由数据
[{path: '/permission/index', // 注册看这里，将多级路由的 path 合并成一级component: () =>import('@/layouts/403.vue'),meta: {auth: 'admin'}}
]

最终效果如下：