[JavaScript知识库]vue-router 路由导航守卫

在?vue-router路由的基本使用?中我们已经介绍过路由的安装和配置等基本使用步骤了，下面我们再来介绍一个 vue-router 的高频使用方法——beforeEach() 路由导航守卫

在项目的实际应用过程中很多页面和权限是根据客户端的用户身份动态决定的，就比如有的场景是没有登录的用户无法访问到首页，必须先登录才能跳转到首页进行后续的操作，这样我们就需要使用到 vue-router 路由导航守卫来限制用户手动跳转页面的操作。

首先，比如我们的页面必须要用户先登录，且登录成功后服务器会生成一个 token 值返回给客户端，客户端将之暂存与本地的?sessionStorage 中用于后续访问时的身份验证密钥。于是通过 token 值我们就可以判断用户是否已经登录过了、是否已经有了可以访问首页的权限。示例代码如下：

// 为路由对象，添加`beforeEach`导航守卫
router.beforeEach((to,from,next)=>{
    //如果用户访问的是登录页，直接放行
    if(to.path==='/login') return next()
    const tokenStr = window.sessionStorage.getItem('token')
    // 没有token,强制跳转到登录页
    if(!tokenStr) return next('/login')
    // 如果上面都没有 return 出去则用户通过验证可以放行
    next()
})

路由导航守卫本质就是?beforeEach?函数，该函数需要一个回调函数作为参数，回调函数中第一个参数?to?:表示将要访问的地址，from?:表示是从哪个地址跳转过来的。next 表示继续执行的函数。而 return next() 则表示放行，如果是?return next('/login') 则表示强制跳转到 /login 页面。

好好学习、天天向上！? ? ? ? ：)