用户登录

在切换路由地址的时候你可以安排一些导航守卫,去做一些检查,在导航守卫里我们可以获取到用户要访问的那个路由,还有用户来自哪里。比如用户访问个人档案页面的时候,你可以在守卫里判断当前用户是不是已经登录了,如果还没登录,可以把用户重定向到登录页面。这些导航守卫你可以你可以安排在应用的全局,也可以在某个具体的路由里,还可以放在某个路由组件里。

下面我们先试一下在应用的全局添加一个导航守卫,这样每次导航都会经过这个守卫的检查。打开 app.router.ts,在这个模块里创建了一个路由器。名字叫 router,这里可以用一下 router 上的 beforeEach 方法,它就是一种导航守卫方法,每次导航之前都会执行这个方法。

方法有三个参数,to,from 还有 next。这个 to 参数的值是用户要访问的路由,from 是用户来自哪个路由,next 是一个函数,在导航守卫里要执行这个函数,才能完成导航。

在控制台上可以输出几样东西,先输出一个表情符号。然后再输出 to 这个参数的值,下面再输出 from 这个参数的值。

回到浏览器先试一下,现在每次打开路由地址的时候,都会经过我们在路由器里安排的导航守卫检查。在控制台上会输出守卫里的 to 还有 from 这两个参数的值。 这里显示要打开的路由是 about 。

你会发现打开路由地址并没有显示对应的路由组件,这是因为在这个全局的路由守卫里,没有执行 next() 这个函数。执行一下 next() 函数,再试一下,点击路由地址,这次就可以正常打开了路由组件。

在这个导航守卫里,你可以检查要访问的路由,比如这里可以判断一下,如果 to.name 等于 postIndex, 如果要访问的是 postIndex 这个路由,你可以继续判断其它的条件。这里我们就先这样。

next,给它一个地址,比如 /,这样如果用户访问的是 postIndex 这个路由,就会被带到应用的首页。 else ,其它情况可以正常的执行这个 next() 。

回到浏览器再试一下,现在访问 /posts 会被重定向到应用的首页。因为在应用全局的导航守卫那里会判断访问的是不是 postIndex 这个路由,如果是,就会打开应用的首页。

回到项目,把这个导航守卫注释,因为暂时还用不到。

导航守卫(Navigation Guards)《 Vue.js 前端应用 #5:应用路由 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点