想请问vue官方文档的这串代码
如果把if括号里面的to.meta.requiresAuth
换成 to.matched.some(record => record.meta.requiresAuth)
并不是一种完全等效的写法啊! 第一种只是判断当前路由, 第二种判断整个路由栈
还有让我费解的是 文档有一段话
一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航守卫中的路由对象)的$route.matched 数组。我们需要遍历这个数组来检查路由记录中的 meta 字段,但是 Vue Router 还为你提供了一个 $route.meta 方法,它是一个非递归合并所有 meta 字段的(从父字段到子字段)的方法
它是一个非递归合并所有 meta 字段的(从父字段到子字段)的方法
$route.meta不是只包含了当前路由的meta对象信息吗 ? 什么是 非递归合并所有 meta 字段(从父字段到子字段)
着实让人费解
router.beforeEach((to, from) => {
// 而不是去检查每条路由记录
// to.matched.some(record => record.meta.requiresAuth)
if (to.meta.requiresAuth && !auth.isLoggedIn()) {
// 此路由需要授权,请检查是否已登录
// 如果没有,则重定向到登录页面
return {
path: '/login',
// 保存我们所在的位置,以便以后再来
query: { redirect: to.fullPath },
}
}
})
如果把if括号里面的to.meta.requiresAuth 换成 to.matched.some(record => record.meta.requiresAuth)
并不是一种完全等效的写法啊! 第一种只是判断当前路由, 第二种判断整个路由栈
答:这个 实际上 是 等效的 因为 router.beforeEach 也是对 所有路由遍历 。反而 to.matched.some 多次一举 。 不过也可以。
它是一个非递归合并所有 meta 字段的(从父字段到子字段)的方法
$route.meta不是只包含了当前路由的meta对象信息吗 ? 什么是 非递归合并所有 meta 字段(从父字段到子字段)
着实让人费解
答:非递归 很好理解 就是 它不会 遍历 它 底下 的 孙子节点(之是合并 父 路由和子路由,如果还有 孙子路由应该会忽略) 。 这是我的理解,不一定对 。你可以 打印一下 $route.meta
我是这样做拦截的,请参考:
新建 permission.js 和 main.js 同级
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import {getToken} from "@/utils/storeToken";
NProgress.configure({showSpinner: false});
// 白名单
const whiteList = [
'/', '/home', '/tables'
];
router.beforeEach((to, from, next) => {
NProgress.start();
const token = getToken('token')
if (token) {
// 有token
next()
} else {
// 没有token
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单,直接进入
next()
} else {
next({path: '/'})
NProgress.done() //进度条
}
}
});
router.afterEach(() => {
NProgress.done()
});
main.js 中引用
// 白名单
import './permission' // permission control