在vue 有的页面是可以访问的 有的页面是需要登录后才能访问的
图上我标识的路由是需要登录后才能访问的
代码:
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 //记录当前是从哪里跳过去的 在登录后直接返回原来的页面
}
})
}
}
})
然后就是登录页的操作
代码
//存储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存储的页面 如果没有进入首页
})