Vue-router 路由守卫

以你之姓@ 2021-11-19 15:50 379阅读 0赞

在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。在路由管理页面添加meta字段。

export default new Router({
    	routes:[{
    		path: 'xxx',
    		components: xxx,
    		name: 'xxx',
    		meta: {
    			requireAuth: false
    		}
    	}]
    })

然后在main.js中

// 路由拦截器
    router.beforeEach((to, from, next) => {
        if (to.matched.length != 0) {
            if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
                if (Boolean(localStorage.getItem("userInfo"))) { // 通过vuex state获取当前的user是否存在
                    next();
                } else {
                    next({
                        path: '/login',
                        query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
                    })
                }
            } else {
                if (Boolean(localStorage.getItem("userInfo"))) { // 判断是否登录
                    if (to.path != "/" && to.path != "/login") { //判断是否要跳到登录界面
                        next();
                    } else {
                        /**
                         * 防刷新，如果登录，修改路由跳转到登录页面，修改路由为登录后的首页 
                         */
                        next({
                            path: '/goods/Goods'
                        })
                    }
                } else {
                    next();
                }
            }
        } else {
            next({
                path: '/login',
                query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    })