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