nodejs抓取动态网页(登录页面与主页面的判断，下有路由独享钩子就像说的一样 )
优采云 发布时间: 2021-10-21 07:01nodejs抓取动态网页(登录页面与主页面的判断，下有路由独享钩子就像说的一样
)
说明：在开发过程中，我们经常会遇到进入登录页面和主页面的判断。通常后台会发回一个session来判断。现在考虑有多少种方法可以达到这种效果；
1. 之前使用的方法是在app.vue入口文件中直接判断是跳转到登录页面还是主页面。
优点：简单明了，直接根据是否有session来判断入口文件是登录还是主页面；
缺点：体验不好，每次判断前都会有登录页面，然后跳转到主页面，
2. 使用动态路由判断用户登录是跳转到登录页面还是主页面，判断管理员权限，判断页面是否存在，没有跳转到404页面。
优点：可以应用于多个时钟，体验好，
添加 main.js 或 router.js
router.beforeEach((to, from, next) => {
console.log(store.state.token)
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
const route = ['index', 'list'];
let isLogin = store.state.token; // 是否登录
// 未登录状态；当路由到route指定页时，跳转至login
if (route.indexOf(to.name) >= 0) {
if (isLogin == null) {
router.push({ path: '/login', });
}
}
// 已登录状态；当路由到login时，跳转至home
console.log(to.name)
localStorage.setItem('routerName', to.name)
if (to.name === 'login') {
if (isLogin != null) {
router.push({ path: '/HomeMain', });;
}
}
next();
});
下面是路由的钩子函数：
路由钩子主要是为用户定义路由变化时进行一些特殊处理
一般来说，vue 中提供了三种类型的钩子
1、全局钩子
2、一个路由专用的钩子
3、组件内钩子
1.全局钩子
主要包括beforeEach和aftrEach，
beforeEach 函数有三个参数：
to：路由器即将进入的路由对象
from：当前导航即将离开的路线
next: 函数，管道中的一个钩子。如果执行完成，则确认导航状态；否则为假，导航终止。
afterEach 函数不需要传递 next() 函数
这种钩子主要是全局使用的，一般用来判断权限和页面丢失时需要执行的操作，比如上面的
router.beforeEach((to, from, next) => {
console.log(store.state.token)
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
const route = ['index', 'list'];
let isLogin = store.state.token; // 是否登录
// 未登录状态；当路由到route指定页时，跳转至login
if (route.indexOf(to.name) >= 0) {
if (isLogin == null) {
router.push({ path: '/login', });
}
}
// 已登录状态；当路由到login时，跳转至home
console.log(to.name)
localStorage.setItem('routerName', to.name)
if (to.name === 'login') {
if (isLogin != null) {
router.push({ path: '/HomeMain', });;
}
}
next();
});
2.一个路由专属钩子
如上所述，某个路由的单次使用与后续组件中的钩子本质上是相同的。都是指特定的路线。不同的是，这里的一般定义是在路由器中，而不是在组件中。如下
{
path: '/dashboard',
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
meta: { title: '系统首页' },
beforeEnter: (to, from, next) => {
},
beforeLeave: (to, from, next) => {
}
},
3.组件路由
主要包括beforeRouteEnter和beforeRouteUpdate，beforeRouteLeave。这些钩子写在组件中，也可以传递三个参数（to、from、next），它们的功能和前面的类似。
beforeRouteLeave(to, from, next) {
// ....
next()
},
beforeRouteEnter(to, from, next) {
// ....
next()
},
beforeRouteUpdate(to, from, next) {
// ....
next()
},
computed: {},
method: {}
最后看官网介绍
to：Route：即将进入的目标路由对象
from：Route：当前导航即将离开的路线
next: 功能：必须调用这个方法来解析这个钩子。执行效果取决于next方法的调用参数。
next()：转到管道中的下一个钩子。如果所有钩子都执行完毕，则确认导航的状态。
next(false)：中断当前导航。如果浏览器的 URL 发生变化（可能是用户手动或浏览器后退按钮），URL 地址将重置为 from 路由对应的地址。
next('/') 或 next({ path:'/' })：跳转到不同的地址。当前导航被中断，然后执行新的导航。
最后一点，关于页面不存在，跳转到404页面
由于路由器本身是从上到下匹配的，如果在前面找到匹配的路由，就会跳转。所以可以直接在最后加上404路由，如下
let routerConfig = [{
path: '/pages',
component: App,
children: [{
path: 'demo/step1/list',
component: coupon,
name: 'coupon-list',
meta: {
title: '红包'
}
}]
}, {
path: '*',
component: NotFound,
name: 'notfound',
meta: {
title: '404-页面丢了'
}
}]
