vue+express.如何做到登录后有了cookie,才可以跳转到另一个页面

Question

vue+express.前端vue控制路由，如何做到登录后有了cookie,才可以跳转到admin,没有cookie,则不能跳转,
如下图

Answer 1

这里给你提两个解决方案,第二种可能更符合你的要求

拦截器

第一种方法是在执行任何请求前加入一个拦截器,然后将后端给出的如 jwt 生成的token之类的 set 到头部

随后如果后端检测token 有效性,无效则后端api统一返回一个401,随后前端跳转回到之前页面即可

Vue.http.interceptors.push((request, next) => {
    var userToken = getUserToken()
    request.headers['Authorization'] = 'Bearer ' + userToken
    next((response) => {
        if (response.status === 401) {
            // TODO: 提示用户授权过期
            setTimeout(() => {
                // TODO: 延迟3秒后跳转到登录页面
            }, 3000)
        }
    })
})

router 钩子

这个可能更加符合你的要求,因为cookie是记录在本地的所以完全可以直接判断是否存在cookie解决问题

router.beforeEach((to, from, next) => {
    // TODO : 判断一下路由,不要什么路由都阻止
    if () {
        if (!hasAuthorization()) {
            // 阻止跳转
            next(false)
        } else {
            // 正常跳转
            next()
        }
    }
})

ps:以上代码均为伪代码,具体请依照文档填写