Token vue js、jwt

Question

我想问，如何使用localstorage中的token成为可以在所有功能中使用的token。 。 我想使用 localstorage 中的令牌来访问别名令牌 localstorage 成为全局令牌的所有功能。 这是我的登录表单代码：

async handleSubmit () {
      // const self = this
      console.log('on handleSubmit()')
      this.$refs.loginForm.validate(async (valid) => {
        if (this.loginLoading) return
        this.loginLoading = true
        try {
          if (valid) {
            const { userName, password } = this.form
            const res1 = await this.handleLogin({ userName, password })
            const res2 = await this.getUserInfo()
            console.log('>>> handleSubmit:33', { res1, res2 })
            console.log('>>> confighomename', this.$config.homeName)
            const tokenstring = JSON.stringify(res1.access_token)
            localStorage.setItem('token', tokenstring)

            this.$emit('on-login-success', {
              username: this.form.userName,
              password: this.form.password
            })

此手柄登录代码：

async handleLogin ({ commit }, { userName, password }) {
      try {
        userName = userName.trim()

        const res = await RestClient.request({
          url: '/api/auth/login', method: 'POST', data: { username: userName, password }
        })

        const data = res.data

        commit('setTagNavList', [])
        commit('setToken', data.id)
        commit('setData', data)

        return data
      } catch (error) {
        console.error('>>> Error in handleLogin API: ', error)
        throw error
      }

那么我可以在哪里使用本地存储中的令牌来实现每个功能？

本地存储的token代替授权，可以在任何地方使用

Answer 1

要使用存储在 localStorage 中的 JWT 令牌作为 Vue.js 应用程序中的全局令牌，首先应将令牌存储在某处（localStorage 或 cookie），然后通过拦截器将其附加到您的请求。 因此，通常登录后您应该：

localStorage.setItem('token', JSON.stringify(res1.access_token));

然后（假设使用 Axios）：

function getToken() {
  return JSON.parse(localStorage.getItem('token'));
}
axios.interceptors.request.use(config => {
  const token = getToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

大多数情况下，您的令牌会保留在本地存储中，并且您可以在拦截器中处理适当的逻辑。