因为路由是前端配的，本质上是一个页面，此不可能通过后台来做拦截器。
在一个应用中，有用户无限制的访问一些页面，同时，还有一些登录后才有的权限。
比如有这样的路由表
12345678910111213141516171819202122232425262728293031 |
let router = new Router({ routes: [ { path: '/login', name: 'login', component: Login }, { path: '/desk', name: 'desk', component: Desk, children: [ { path: 'public', name: 'public', component: Public }, { path: 'admin', name: 'admin', component: Admin } ] }, { path: '/*', name: 'index', redirect: '/desk/public' } ]});
|
这就路由表即是最简单的，有无权限访问页面和需要登录权限才可以访问的页面
可以在路由跳转前进行判断，用户是否有权进行页面的访 大专栏 vue路由权限认证问，这个是由前端来完成。
除此之外，任何前端的限制都可以被突破。因此在调用登录权限的页面接口时，需要后台做接口验证。
前端做的路由拦截
使用router.beforeEach((to, from, next) => {})来做验证
首先给需要权限的路由加上
123 |
meta: { requireAuth: true}
|
然后
12345 |
router.beforeEach((to, from, next) => { if (to.meta.requireAuth){ // 来获取此前设置的requireAuth值 }})
|
那么根据什么来判断
一般登录后，后台返回token，前端将此token缓存，如果跳转路由前读取token，有值并且在有效期内，可以进行跳转，如果无效则进行跳转登录页面操作
前端缓存 token的地方，可以是
- vuex
- localStorage
- cookie
后台接口的验证
前端在发送所有接口在request.header中添加auth字段，携带koken，后台来判断是否可以访问，如果正常则返回数据，否则返回状态码401未登录，前端根据这个状态码来进行登录页面的跳转。
因此做这个操作需要进行对前端接口请求进行拦截，下面是axios示例代码
整体示例代码
123 |
# serve with hot reload at localhost:9016npm run devnpm run server |
原文地址：https://www.cnblogs.com/sanxiandoupi/p/11724057.html
时间： 2024-07-30 01:15:30