如何使用 vuejs/vuex 和 ASP.NET Web API 实现令牌认证和授权

Question

我已经在 vuejs 中实现了 web 应用程序的前端，并使用 asp.net web api 实现了后端。用户通过 LDAP 服务器进行身份验证。我已经实现了登录部分，并且在标题中收到了令牌以及到期日期，但我不知道如何从那里开始。我一直在阅读的指南是关于 OAuth、Okta 等的。如何从标头中检索令牌和到期日期并使用 vuex 保存用户信息并保持会话？

 public HttpResponseMessage Login(string quad, string password)
        {
            if(Thread.CurrentPrincipal != null && Thread.CurrentPrincipal.Identity.IsAuthenticated)
            {
                var basicAuthenticationIdentity = Thread.CurrentPrincipal.Identity;
                if(basicAuthenticationIdentity != null)
                {
                    var username = basicAuthenticationIdentity.Name;
                    return GetAuthToken(username);
                }
                return null;

            }
            return null;
        }


    private HttpResponseMessage GetAuthToken(string quad)
    {
        var token = Guid.NewGuid().ToString();
        DateTime issuedOn = DateTime.Now;
        DateTime expiredOn = issuedOn.AddMinutes(30);
        var tokendomain = new TOKEN
        {
            QUAD = quad,
            ISSUED_ON = issuedOn,
            EXPIRES_ON = expiredOn,
            AUTHTOKEN = token
        };
        var db = new KronosDB("public");
        db.Tokens.Add(tokendomain);
        db.SaveChanges();
        var response = Request.CreateResponse(HttpStatusCode.OK, "Authorized");
        response.Headers.Add("Token", tokendomain.AUTHTOKEN);
        response.Headers.Add("TokenExpiry", tokendomain.EXPIRES_ON.ToString());
        response.Headers.Add("Access-Control-Expose-Headers", "Token,TokenExpiry");
        return response;
    }

我即将实现身份验证，但在 App.vue 中仍然存在问题。代码如下：

  computed: {
      ...mapGetters({ currentUser: 'currentUser' })
    },
    created () {
      this.checkCurrentLogin()
    },
    updated () {
      this.checkCurrentLogin()
    },
    methods: {
      checkCurrentLogin () {
        if (!this.currentUser && this.$route.path !== '/login') {
          // this.$router.push('/?redirect=' + this.$route.path)
          this.$router.push('/login')
        }
      }
    },

vuex index.js

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './auth'
Vue.use(Vuex)

export default new Vuex.Store({
  modules:{
    auth
  },
})

授权

import User from '../model/User'
import * as MutationTypes from './mutation_types'
const state = {
  user: User.from(localStorage.token)
}

const mutations = {
  [MutationTypes.LOGIN] (state) {
    state.user = User.from(localStorage.token)
  },
  [MutationTypes.LOGOUT] (state) {
    state.user = null
  }
}
const getters = {
  currentUser (state) {
    return state.user
  }
}

const actions = {
  login ({ commit }) {
    commit(MutationTypes.LOGIN)
  },

  logout ({ commit }) {
    commit(MutationTypes.LOGOUT)
  }
}

export default {
  state,
  mutations,
  getters,
  actions
}

突变类型

export const LOGIN = 'LOGIN' export const LOGOUT = 'LOGOUT'

当我从 App.vue 中删除计算属性“更新”时，它可以工作，而当我添加“更新”计算属性时它不会。 vuex 绑定“currentUser”也保持为空。

Answer 1

要从 vue 应用程序进行 ajax 调用，您可以使用 axios vue 库。这个博客handling ajax request 将有助于开始。

一旦您收到作为 ajax 响应的令牌和到期时间，请根据您的偏好将令牌和到期时间保存在 localStorage 或 cookie 或 sessionStorage 中。

为了限制页面访问，如果您使用vue-router 库，请在beforeEach 回调中检查令牌是否过期，如果过期则重定向到登录页面。在向服务器发送请求之前，使经过身份验证的 api 调用在标头中附加令牌。