Vue.js/Vuex与ASP.NET Web API：Token认证授权后续操作问询

Hey there! Let's walk through exactly how to handle token extraction, Vuex storage, and session persistence for your Vue + ASP.NET Web API + LDAP setup. I'll break this down into actionable steps with code snippets tailored to your stack.

First, when your login API call succeeds, you'll need to pull the token and expiry time from the response headers. Axios automatically normalizes header names to lowercase, so make sure you match the exact names your backend sends (adjust these to match your actual header keys):

// Example login method in a Vue component or API service
async loginUser(credentials) {
  try {
    const response = await axios.post('/api/auth/login', credentials);
    
    // Extract token (adjust the header name if your backend uses something else)
    // If your token uses the "Bearer" scheme, strip that prefix
    const authHeader = response.headers['authorization'];
    const token = authHeader ? authHeader.replace('Bearer ', '') : null;
    
    // Extract expiry time (again, match your backend's header key)
    const tokenExpiry = response.headers['x-token-expiry'];
    
    return { token, tokenExpiry };
  } catch (err) {
    console.error('Login failed:', err);
    throw err; // Let the component handle error display
  }
}

Vuex will act as your single source of truth for auth state. Here's a complete store setup that handles storage, persistence, and session initialization:

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userToken: null,
    tokenExpiry: null,
    isAuthenticated: false
  },
  mutations: {
    // Set auth data when login succeeds
    SET_AUTH_STATE(state, { token, expiry }) {
      state.userToken = token;
      state.tokenExpiry = expiry;
      state.isAuthenticated = true;
    },
    // Clear auth data on logout or expiry
    CLEAR_AUTH_STATE(state) {
      state.userToken = null;
      state.tokenExpiry = null;
      state.isAuthenticated = false;
    }
  },
  actions: {
    // Handle login flow
    async login({ commit }, credentials) {
      const { token, tokenExpiry } = await loginUser(credentials); // Call the login method above
      
      commit('SET_AUTH_STATE', { token, expiry: tokenExpiry });
      
      // Persist to localStorage so state survives page refreshes
      localStorage.setItem('authToken', token);
      localStorage.setItem('tokenExpiry', tokenExpiry);
    },
    // Handle logout
    logout({ commit }) {
      commit('CLEAR_AUTH_STATE');
      localStorage.removeItem('authToken');
      localStorage.removeItem('tokenExpiry');
    },
    // Initialize auth state on app load (checks localStorage)
    initAuth({ commit }) {
      const token = localStorage.getItem('authToken');
      const expiry = localStorage.getItem('tokenExpiry');
      
      // Only restore state if token exists and hasn't expired
      if (token && expiry && new Date(expiry) > new Date()) {
        commit('SET_AUTH_STATE', { token, expiry });
      } else {
        commit('CLEAR_AUTH_STATE');
      }
    }
  },
  getters: {
    // Convenient getters for components to access auth state
    isLoggedIn: state => state.isAuthenticated,
    authToken: state => state.userToken
  }
});

Add Auth to Your App Flow #

• Initialize Auth on App Load: In your main.js, dispatch the initAuth action when the app starts:

  new Vue({
    store,
    router,
    created() {
      this.$store.dispatch('initAuth');
    },
    render: h => h(App)
  }).$mount('#app');
  

• Route Guarding: Protect authenticated routes with a router beforeEach hook:

  // router/index.js
  router.beforeEach((to, from, next) => {
    const isLoggedIn = router.app.$store.getters.isLoggedIn;
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    
    if (requiresAuth && !isLoggedIn) {
      next('/login'); // Redirect unauthenticated users to login
    } else {
      next();
    }
  });
  

• Auto-Attach Token to Requests: Add an Axios interceptor to include the token in every authenticated request:

  axios.interceptors.request.use(config => {
    const token = store.getters.authToken;
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`; // Match your backend's expected scheme
    }
    return config;
  });
  

Since you mentioned your backend uses HttpResponseMessage, here's how you'd add those auth headers in your ASP.NET Web API login endpoint (adjust token generation to match your actual implementation):

public HttpResponseMessage Login(LoginViewModel model)
{
    // LDAP authentication logic here (verify user credentials against LDAP server)
    var isAuthenticated = ValidateLdapCredentials(model.Username, model.Password);
    
    if (!isAuthenticated)
    {
        return Request.CreateResponse(HttpStatusCode.Unauthorized, "Invalid credentials");
    }
    
    // Generate your token (e.g., JWT) and calculate expiry
    var token = GenerateAuthToken(model.Username);
    var expiryTime = DateTime.UtcNow.AddHours(2); // Example: 2-hour expiry
    
    var response = Request.CreateResponse(HttpStatusCode.OK);
    // Add token to Authorization header (Bearer scheme is standard)
    response.Headers.Add("Authorization", $"Bearer {token}");
    // Add expiry time (use ISO 8601 format for easy parsing in JS)
    response.Headers.Add("X-Token-Expiry", expiryTime.ToString("o"));
    
    return response;
}

Quick Tips #

• Header Name Consistency: Double-check that your backend's header names (e.g., X-Token-Expiry) match what you're accessing in the frontend (axios converts headers to lowercase, so use x-token-expiry in JS).
• Token Expiry Handling: Add logic to check if the token is about to expire before making requests, and redirect to login if it's expired.
• Storage Choice: Use localStorage for persistent sessions (survives browser restarts) or sessionStorage for session-only auth (clears when browser closes).

内容的提问来源于stack exchange，提问作者Aatish Kumar