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

Vue 项目进入页面之前判断用户是否登录，主要涉及使用导航守卫、Token验证、Vuex状态管理、和本地存储等关键技术。导航守卫是 Vue 项目中用于实现这一功能最直接、最有效的办法，通过对路由跳转的拦截和验证，来保证用户在未登录的状态下，不能访问需要登录后才能查看的页面。接下来，将详细讲述导航守卫的使用方法及其他相关技术的运用，以确保Vue项目能够准确判断用户的登录状态。

一、使用导航守卫实现登录判断

导航守卫（Navigation Guards）是Vue-Router提供的一种功能，用于通过跳转或取消的方式守卫导航。具体到用户登录验证，可以使用全局前置守卫来实现。

首先，在创建Vue路由实例时，可以定义全局前置守卫：

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
  // 检查localStorage或者状态管理库中是否存在Token
  const isLogged = localStorage.getItem('token');
  if (to.matched.some(record => record.meta.requiresAuth) && !isLogged) {
    // 用户未登录，重定向到登录页面
    next({
      path: '/login',
      query: { redirect: to.fullPath } // 将用户原本想要访问的页面记录下来
    });
  } else {
    next(); // 确保一定要调用 next()
  }
});

这段代码中 to.matched.some(record => record.meta.requiresAuth) 是检查即将跳转的页面是否需要登录权限，record.meta.requiresAuth 需要在定义路由时设置。

接着，定义路由时设置meta字段：

const routes = [
  { path: '/login', component: LoginPage },
  {
    path: '/secret',
    component: SecretPage,
    meta: { requiresAuth: true } // 需要登录的页面
  },
  // 其他路由配置
];

二、TOKEN 验证机制

在现代Web应用中，Token认证机制是非常流行的一种认证方式。用户首次登录后服务器会返回一个Token，客户端将此Token存储起来（一般存放在LocalStorage或Cookie中），之后每次请求都携带这个Token，服务器通过验证Token来确认用户身份。

后端验证Token的有效性：

当用户尝试访问保护资源时，后端会验证请求头中携带的Token。如果Token验证通过，则允许访问；如果失败，则返回一个错误响应。

前端在每次请求中携带Token：

import axios from "axios";
// 设置请求拦截器，在每次请求头中加上Token
axios.interceptors.request.use(config => {
  const token = localStorage.getItem("token");
  if(token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

三、VUEX 状态管理

在Vue项目中，还可以通过Vuex进行状态管理，以保存用户的登录状态。

设置Vuex Store：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    isLoggedIn: false
  },
  mutations: {
    setLoginState(state, status) {
      state.isLoggedIn = status;
    }
  },
  actions: {
    login({ commit }) {
      // 登录成功后设置登录状态
      commit('setLoginState', true);
    },
    logout({ commit }) {
      // 登出操作后清除登录状态
      commit('setLoginState', false);
    }
  }
});

在组件中使用Vuex保存的登录状态来进行判断：

computed: {
  isLoggedIn() {
    return this.$store.state.isLoggedIn;
  }
}

四、本地存储

除了以上方法，还可以利用Web的本地存储功能（如LocalStorage）来存储用户的登录状态。登录时将用户信息或token存储在LocalStorage中，每次路由跳转前通过检查LocalStorage来判断用户是否登录。

本地存储操作示例：

// 登录成功后
localStorage.setItem('token', '用户的Token');
localStorage.setItem('userInfo', JSON.stringify(userInfo));
// 登出时
localStorage.removeItem('token');
localStorage.removeItem('userInfo');