|
vue项目进入页面之前判断用户是否登录
在项目中，有些页面是用户必须登录过之后才可以打开的，或者防止用户通过地址直接进入，那么就需要做一些设置：
- 在路由配置router.js中配置：
{
path: '/usercenter',
name: 'UserCenter',
component: () => import('../views/userCenter/UserCenter.vue'),
meta: {
requireAuth:true,
},
}
在main.js中配置：
//进入页面之前判断用户是否登录
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (sessionStorage.getItem('UserLogin')) { // 获取用户登录信息
next();
}else {
next({
path: '/login',
query: {redirect: from.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
}
else {
next();
}
})
在登录页面登录成功之后跳转配置：
// 获取登录成功后要跳转的路由。
let redirect = decodeURIComponent(this.$route.query.redirect || '/');
this.$router.push({
path: redirect
})
|