vue项目进入页面之前判断用户是否登录

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
})