vue登录返回原来的页面

在vue 有的页面是可以访问的 有的页面是需要登录后才能访问的

vue登录返回原来的页面_第1张图片
图上我标识的路由是需要登录后才能访问的
vue登录返回原来的页面_第2张图片
代码:

	router.beforeEach((to, from, next) => {
    if (to.path == "/login") { //如果是访问登录页 直接放行
        return next()
    }
    const token = window.sessionStorage.getItem("token")
    if (!to.meta.requireAuth) {
        //如果meta里面不存在requireAuth 也就是我其他路由没有设置requireAuth 都是不需要登录就可以访问的  直接放行
        next()
    } else { //如果存在requireAuth
        if (token) { //如果存在token 说明你已经登录 直接放行
            next()
        } else { //如果不存在token 说明你还没登陆   
            next({
                path: "/login", //跳转登录页
                query: {
                    redirect: to.fullPath //记录当前是从哪里跳过去的   在登录后直接返回原来的页面
                }
            })
        }

    }
})

然后就是登录页的操作
vue登录返回原来的页面_第3张图片

代码

     //存储token
      window.sessionStorage.setItem("token","11111")  //点击登录按钮 存储token
      console.log(this.$route)
      this.$router.push({
        path:this.$route.query.redirect?this.$route.query.redirect:"/"  //如果存在query 就进入query存储的页面 如果没有进入首页
      })

你可能感兴趣的:(vue,vue)