Vue2路由鉴权

2019-08-04 21:02:36 阅读：217 来源： 互联网

标签：登录 next Vue2 path router 鉴权路由 view

路由导航钩子做鉴权
/router/index.js

var router;
export default router = new Router({
routes : [
{
path: '/profile/address',
name: 'MyAddress',
component: MyAddress,
meta: {
title: '我的地址',
requireAuth: true // 只要此字段为true，必须做鉴权处理
}
},
// 更多...
]
})

let indexScrollTop = 0
router.beforeEach((to, from, next) => {
// 路由进入下一个路由对象前，判断是否需要登陆
// 在路由meta对象中由个requireAuth字段，只要此字段为true，必须做鉴权处理
if (to.matched.some(res => res.meta.requireAuth)) {
// userData为存储在本地的一些用户信息
let userData = getUserData()
// 未登录和已经登录的处理
// getUserData方法处理后如果userData.token没有值就是undefined，下面直接判断
if (userData.token === undefined) {
// 执行到此处说明没有登录，君可按需处理之后再执行如下方法去登录页面
// 我这里没有其他处理，直接去了登录页面
next({
path: '/login',
query: {
redirect: to.path // 将跳转的路由path作为参数，登录成功后再跳转到该路由
}
})
} else {
// 执行到说明本地存储有用户信息
// 但是用户信息是否过期还是需要验证一下滴
let overdueTime = userData.overdueTime
let nowTime = +new Date
// 登陆过期和未过期
if (nowTime > overdueTime) {
// 登录过期的处理，君可按需处理之后再执行如下方法去登录页面
// 我这里没有其他处理，直接去了登录页面
next({
path: '/login',
query: {
redirect: to.path
}
})
} else {
next()
}
}
} else {
next()
}
if (to.path !== '/') {
// 记录现在滚动的位置
indexScrollTop = document.body.scrollTop
}
document.title = to.meta.title || document.title
})

router.afterEach(route => {
if (route.path !== '/') {
document.body.scrollTop = 0
} else {
Vue.nextTick(() => {
// 回到之前滚动位置
document.body.scrollTop = indexScrollTop
})
}
})
export default router

导航去登录页面调用的next方法里面有个query对象，携带了目标路由的地址，这是因为在登录成功后我们需要重定向到目标页面。

知识点
router-link

1.在HTML5 history模式下使用了base选项,所有to属性可以不用写基路径
2.会拦击点击事件,不会重新加载页面.
3.router-link默认渲染为a标签,我们可以通过tag属性设置为别的标签(常用的li).
4.to属性可以绑定name(命名组件),query(带查询参数)

<router-link :to="{name:'entityList', query:{page: 'Ecp.SystemMessage.List.vdp'}}" tag="li">

</router-link>

.

router-view

1.router-view: 渲染匹配到的视图组件,router-view匹配到的视图组件里面还可以嵌套自己的router-view.根据嵌套路径(children)来继续渲染.
2.router-view可以通过name属性来渲染对应的component下相应的组件
3.router-view可以配合transition与keep-alive使用,如果同时使用,里面要使用keep-alive.
4.keep-alive缓存router的请求

<transition name="fade" mode="out-in" key="$route.path">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
---------------------
作者：猫老板的豆
来源：CSDN
原文：https://blog.csdn.net/x550392236/article/details/80696412
版权声明：本文为博主原创文章，转载请附上博文链接！

标签：登录,next,Vue2,path,router,鉴权,路由,view
来源： https://www.cnblogs.com/shaozhu520/p/11299643.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue2路由鉴权