Vue: 使用导航守卫拦截非法请求

Vue: 使用导航守卫拦截非法请求

使用导航守卫拦截非法请求，大致步骤如下:

0. 前提: 规范路由(router.js)的跳转路径: 对于 获取权限后 ，才能访问的路径，修改其前缀（此处为将需要权限才能访问的请求路径前缀设为 “/user”）。

router.js 如下图:

1. 封装 Storage对象
2. 在 main.js 中使用 导航守卫
3. 在 Vue-CLI 项目的 main.js 中，添加以下代码:

router.beforeEach((to, from, next) => {
    if (to.path.startsWith('/user')) {
        var user = storage.get('user')

        if (user != null) {
            // 放行
            next();
        } else {
            alert("请先登录！");
            next('/login');
        }
    } else {
        next();
    }

})

即可实现 导航守卫拦截非法请求。