Vue路由鉴权

Vue路由鉴权

路由导航钩子做鉴权

/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 = 0router.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

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

知识点

​​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的请求

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。