YuKi
论坛版主
论坛版主
  • 最后登录2020-07-29
  • 发帖数13
  • 社区居民
阅读:166回复:0

Vue中的导航守卫如何配置?

楼主#
更多 发布于:2020-06-27 22:09
这次是针对vue的全局守卫的配置来讲讲
那么,这个beforeEach在哪里配置呢?导航守卫是管路由的当然在router里配置啊
在main.js中引用了路由后

import router from './router'
就可以在router中调用beforeEach这个方法
router.beforeEach((to,from,next) =>{
    var loginMsg = JSON.parse(localStorage.getItem('loginMsg'))
    if(to.path === "/"){
        next()
    }
    else {
        if(!loginMsg){
            next("/")
        }
        else {
            Axios.post("http://39.106.80.215/healthproject/admin/user/verificationToken",{token:loginMsg.token},
                {
                    transformRequest:[
                        function(data){
                            let params = "";
                            var arr = [];
                            for(var key in data){
                                arr.push(key+"="+data[key]);
                            }
                            params = arr.join("&");
                            return params;
                        }
                    ] }
            ).then((res) =>{
                console.log(res);
                if(res.data.code === 200){
                    next()
                }
                else {
                    next("/")
                }
            })
        }
    }
})
这里的代码就是在router下面配置的一个钩子函数,这里面有三个参数,to,frpm,next。
想要实现一个简单的根据权限判断然后跳转的守卫如何做呢?
他的to.path就是用户即将跳转的路径,先判断用户要跳转哪个页面,然后可以向后台发起一个请求判断该用户是否有权限可以跳转到该页面,然后使用next属性进行下一步的执行,next()不给参数的话就会跳转至tp.path也就是用户要跳转的路径,next()里面也可以给一个路由的路径,就是让用户接下来跳转的路径。
游客


返回顶部

公众号

公众号