vuejs 2 - vue-auth JWT 令牌不可能安全

Question

这是我的 Vue 对象：

Vue.use(require('@websanova/vue-auth'), {
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  http: require('@websanova/vue-auth/drivers/http/axios.1.x'),
 router: require('@websanova/vue-auth/drivers/router/vue-router.2.x'),
 fetchData: {url: 'http://localhost:5000/auth/user', method: 'GET', 
             enabled: true},
 tokenDefaultName: 'access_token',
 parseUserData: function (response) {
 console.log('found user')
 return response.data.user
 },
 tokenStore: ['localStorage']
})

这是我的登录信息：

this.$auth.login({
            data: {
              username: this.model.email,
              password: this.model.password
            },
            success: function (response) {
              alert(response)
              console.log(response)
              this.$auth.user = response.data
            },
            error: function (res) {
              console.log(res.data)
              console.log(res)
              this.$notify({
                component: {
                  template: `<span><strong>Oops, something went wrong... </strong><br>Not possible to login because of an internal server error</span>`
                },
                icon: 'fa fa-exclamation',
                horizontalAlign: 'right', // right | center | left
                verticalAlign: 'top', // top | bottom
                type: 'danger'  // info | success | warning | danger
              })
              this.model.error_msg = 'Not possible to login'
            },
            rememberMe: true,
            url: 'http://localhost:5000/auth/login',
            redirect: '/dashboard',
            fetchUser: true
          })

工作流程应该是

• POST 到 /login API 返回令牌（这工作）
• 存储令牌（这不起作用）
• 使用 Token 获取用户路由（这不起作用）

如果 vue 发布到 /login 路由，API 会返回以下内容：

{
  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1MjA5Mzg2MTcsIm5iZiI6MTUyMDkzODYxNywianRpIjoiZTZiNmViNTItMTI4NC00NzA5LWEwYTMtOTk5YTM4YmIyMTcwIiwiZXhwIjoxNTIwOTM5NTE3LCJpZGVudGl0eSI6eyJmaXJzdG5hbWUiOiJHZW9yZyIsImxhc3RuYW1lIjoiU2F0dGxlciIsImVtYWlsIjoiZ2VvcmdAc2F0dGxlci5pbyIsInV1aWQiOiI2ZTU1OGZjM2ExYjg0MTQ0YWQ1ODU1N2JlYWMxMjFkOCJ9LCJmcmVzaCI6dHJ1ZSwidHlwZSI6ImFjY2VzcyJ9.0EhkUXZpG4WTxhnDvQQp8i97GaNXoNyp24P7qLMRUPM", 
  "message": "successfully logged in - welcome", 
  "refresh_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1MjA5Mzg2MTcsIm5iZiI6MTUyMDkzODYxNywianRpIjoiNzAxNTAxYWYtODJjMC00YmQ5LTg1YjAtZjQ0ZTNjNzgzYmY1IiwiZXhwIjoxNTIzNTMwNjE3LCJpZGVudGl0eSI6eyJmaXJzdG5hbWUiOiJHZW9yZyIsImxhc3RuYW1lIjoiU2F0dGxlciIsImVtYWlsIjoiZ2VvcmdAc2F0dGxlci5pbyIsInV1aWQiOiI2ZTU1OGZjM2ExYjg0MTQ0YWQ1ODU1N2JlYWMxMjFkOCJ9LCJ0eXBlIjoicmVmcmVzaCJ9.gRH3nJQEaBc2_0iZ9E9fhGg-9i-fil8c5SOvh8Tvsbg", 
  "request_id": "037dd993-1c19-4c68-8e5a-e060e11d3ce8", 
  "status": "OK"
}

如果我在开发工具中检查本地存储，它似乎是空的

如何告诉 vue-auth 存储访问令牌？ 谢谢

Answer 1

您应该在成功的情况下保存access_token。

this.$auth.login({
  data: {
    username: this.model.email,
    password: this.model.password
  },
  success: function (response) {
    alert(response)
    console.log(response)
    this.$auth.token('access_token', response.data.access_token)
  }