vue.js点击判断是否已经登录

首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 
否则就进入登录页面。

{
      path: '/shops/users',
      name: 'Users',
      meta: {
          title: '用户中心',
          requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
      },
      component: Users
}

定义完路由后，在main.js我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        if (localStorage.getItem('BASEINFO')) {  // 通过vuex state获取当前的用户是否存在
            next();
        }
        else {
            next({
                path: '/shops/login',
                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next();
    }
})

https://router.vuejs.org/zh/guide/#javascript