vue router路由配置,元信息meta的使用-登录拦截验证

原文来自 vue router路由配置,元信息meta的使用-登录拦截验证_shenroom的博客-CSDN博客 

看原文排版更舒服,我只是记录一下

 

路由基本配置
1.在router文件夹中找到 indexs.js

注意:如果创建项目是没有安装router,不会有router文件夹,该文件夹在src 文件夹的根目录中

// 1.引入路由以及vue,下面的是固定写法,照写就可以
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

2.创建路由实例
const router = new Router({
linkActiveClass: 'app-active', // 路由点击选中时的颜色(app-active为自定义的class样式类)
routes: [
{ // 根路径
path: '/',
redirect: '/home',
component: () => import('@/pages/home') // 路由懒加载写法
},
{
path: '/home',
name: 'home',
component: () => import('@/pages/home'),
}
})

/* 路由拦截器 路由跳转前的操作 */
router.beforeEach((to, from, next) => {
next()
})
/* 路由拦截器 路由跳转后的操作 */
router.afterEach(to => {

})

3.将路由导出,供外部接收,主要用于main.js接收
export default router
2.配置好router中的index.js文件后需要在main.js 中,挂载路由router到vue实例上

import Vue from 'vue'
import App from './App'
import router from './router' // 导入配置好的路由文件
import store from './store' // 导入配置好的vuex文件
Vue.config.productionTip = false

new Vue({
el: '#app',
router, // 挂载路由到实例中
store,// 挂载vuex到实例中
components: { App },
template: '<App/>'
})
通过上面两步,路由的基本配置已经完成可以正常使用路由了。

路由元信息meta使用
1.路由拦截器

router.beforeEach( to, from, next )

router.afterEach( to, from )

参数说明:

to:表示要跳转的路由对象。

from:表示跳转前的路由对象

next:继续执行跳转的函数,只有跳转前的拦截才有这个参数。

import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
routes: [{
path: '/',
redirect: '/home',
component: () => import('@/pages/home')
}]
})

/* 路由拦截器 路由跳转前的操作 */
router.beforeEach((to, from, next) => {
/* 路由跳转前可进行各种操作,如数据处理,权限验证,取消上页所有网络请求等等,
*一定要注意,数据处理后,一定要执行next(),否则路由不会进行跳转。*/
if(true){
// 进行的操作
next()
}else{
// 进行的一些操作
next()
}

})
/* 路由拦截器 路由跳转后的操作 */
router.afterEach(to => {
// 在这里执行路由跳转成功后所进行的操作
})

export default router
上面已经解了拦截器的基本使用,下面再来看一下,拦截器结合路由元信息meta的使用。

2.路由拦截器中元信息meta对象的使用----登陆拦截验证 和 修改页面的 title

场景描述如下图:

1.用户访问home页面,或者home的子页面mine页面时,由于home只有登陆后才能进入,所以用户在访问这两个页面时需要判断是否登录,如果没有登录就跳转到登录页面,登录成功后自动跳转到用户访问的权限页面。

2.当调转对应的路由页面时,就更改网页的名字,也就是index.heml 中 head 标签里面的 title 的值

 

(1)、首先准备三个路由页面,home.vue 、 login.vue 、mine.vue

/*------------------------------------------home.vue------------------------------------------*/
<template>
<div>
<h1>首页</h1>
<router-link to="/home/mine">前往首页子页面</router-link>
<router-view></router-view>
<div>
</template>
...
/*------------------------------------------mine.vue------------------------------------------*/
<template>
<div>
<h1>子页面</h1>
<div>
</template>
...
/*------------------------------------------login.vue------------------------------------------*/
<template>
<div>
<h1>登录页面</h1>button
<button @click="login">前往首页子页面</button>
<div>
</template>
<script>
...
methodes:{
login(){
localStorage.login = true // 登录状态
// this.$route.params.redirect 是路由拦截是传过来的拦截页面的路由对象,看下文的路由拦截配置详情,有说明。
if( this.$route.params.redirect ){ // 判断是否有redirect参数
this.$router.push( this.$route.params.redirect ) 登录后跳回被的拦截
}
}
}
...
</script>
(2)、在路由配置router/index.js文件中 设置路由拦截

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{ // 根路径
path: '/',
redirect: '/home',
component: () => import('@/pages/home'), // 路由懒加载写法
},{
path: '/home',
name: 'home',
component: () => import('@/pages/home'),
meta:{
isLogin : true // 自定义一个属性,true需要登录权限
title:"主页"
},
children:[{
path: 'mine',
name: 'mine',
component: () => import('@/pages/home/mine'),
meta:{ // 不做登录权限的设置
title:"用户中心页"
}
}]
},{
path: '/login',
name: 'login',
component: () => import('@/pages/login'),
meta:{
title:"登录页"
}
},
})

//导航前守卫(跳转前)
router.beforeEach(function(to,from,next){
// to: 表示要跳转的页面。from:表示从哪个页面来
let login_in = localStorage.login // 是否已登录
let require = to.matched.some(function(item){ // 是否需要登录
return item.meta.isLogin
})
if( !login_in && require ){ // 当未登录,且跳转的页面需要登录后才能操作时,进行路由拦截
next({ // 跳转登录页
name: "login",
params: { redirect: to } // 将 要跳转(即被拦截) 的路由对象,作为参数,传递到登录页面
});
}else{ // 已登录就正常跳转,不做任何拦截
next() // 正常跳转到下一页
}
})
//导航后守卫(跳转后)
router.afterEach(function(to,from){
document.title = to.meta.title //跳转后设置页面的title
})
export default router
到此所需的功能我们已经实现了。

细心的人可能会发现 beforeEach 拦截器中 变量 require 的值不是应该直接用路由meta.isLogin 的值 即 to.meta.isLogin的值?。为什么使用了数组some()方法对to.matched进行循环,来赋值?to.matched又指的是什么?

这一步很重要,不能直接使用to.meta.isLogin的值,这样的话只是跳转到home.vue时会被拦截,但是如果直接在地址栏访问 home.vue 的子页面mine.vue时如:localhost:8080/#/home/mine ,就不会进行拦截。

因为mine.vue页面,配置路由时没有在meta中设置 isLogin,所以to.meta.isLogin的值是false,会直接跳转不会进行拦截。所以要循环to.matched 进行判断。说了这么多,咱来看一下to.matched指的是什么:

to.matched 返回的是一个数组,里面是存放的是路由对象,指当前匹配的路径中所包含的路由片段所对应的路由对象。

比如:localhost:8080/#/home/mine 这个路径中我看到有两个路由片段home 和 mine

因此to.matched 的数组存放的就是 home 和 mine 的路由实例。用数组some()循环方法,是匹配数组中所有元素,只要有一个元素的某个值到达了条件 item.meta.isLogin 为true,该方法就会返回true。所以直接访问mine页面时,to.matched数组中,home对象的meta.isLogin是true,达到了条件,所以整体返回了true,此时 require 的值即为true。 不懂数组some()方法的可以去恶补一下ES6-数组新增的方法。
————————————————
版权声明:本文为CSDN博主「shenroom」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41772754/article/details/87915596

posted @ 2021-07-30 22:20  LoveCoder  阅读(201)  评论(0编辑  收藏  举报