gpt4 book ai didi

Laravel API - 身份验证在重新加载页面后立即生效

转载 作者:搜寻专家 更新时间:2023-10-30 22:12:55 25 4
gpt4 key购买 nike

我正在尝试使用 VueJS 作为前端并使用 Laravel 作为后端来构建单页应用程序 (SPA)。
我正在使用 laravel's passport管理身份验证 token 等


问题:登录后我必须重新加载页面才能成功通过身份验证。


登录方式

data() {
return {
email: '',
password: '',
}
},
methods: {
login() {
var data = {
client_id: 2,
client_secret: '****************************',
grant_type: 'password',
username: this.email,
password: this.password
}
// send data
this.$http.post('oauth/token', data)
.then(response => {
// authenticate the user
this.$store.dispatch({
type: 'authenticate',
token: response.body.access_token,
expiration: response.body.expires_in + Date.now()
})
// redirect after successful login
if (this.$route.query.from)
this.$router.push(this.$route.query.from)
else
this.$router.push('/feed')
})
}
}

从后台获取用户信息(刷新页面后生效)

setUser () {
// this route throws 'unauthenticated' error
// and works only after refreshing the page
this.$http.get('api/users/')
.then(response => {
this.$store.dispatch({
type: 'setUser',
id: response.body.id,
email: response.body.email,
name: response.body.name
})
})
}
}

Vuex 商店

export default new Vuex.Store({
state: {
isAuth: !!localStorage.getItem('token'),
user: {
id: localStorage.getItem('id'),
email: localStorage.getItem('email'),
name: localStorage.getItem('name')
}
},
getters: {
isLoggedIn(state) {
return state.isAuth
},
getUser(state) {
return state.user
}
},
mutations: {
authenticate(state, { token, expiration }) {
localStorage.setItem('token', token)
localStorage.setItem('expiration', expiration)
state.isAuth = true
},
setUser(state, { id, email, name }) {
localStorage.setItem('id', id)
localStorage.setItem('email', email)
localStorage.setItem('name', name)
state.user.id = id
state.user.email = email
state.user.name = name
}
},
actions: {
authenticate: ({ commit }, { token, expiration }) => commit('authenticate', { token, expiration }),
setUser: ({ commit }, { id, email, name }) => commit('setUser', { id, email, name })
}
})


Laravel 路由

Route::group(['middleware' => 'auth:api'], function() {
Route::get('/users', 'UsersController@users');
});

Laravel 函数

public function users(Request $request)
{
return $request->user();
}


错误信息

enter image description here
当我重新加载页面时,错误消息消失并且我已成功通过身份验证。


我很乐意提供任何帮助!

最佳答案

感谢 Frank Provost,我找到了答案。如果其他人遇到同样的问题:

我没有在每个请求中传递 token 。

我不得不改变这个

Vue.http.headers.common['Authorization'] = 'Bearer ' + Vue.auth.getToken()

对此

Vue.http.interceptors.push((request, next) => {
request.headers.set('Authorization', 'Bearer ' + Vue.auth.getToken())
request.headers.set('Accept', 'application/json')
next()
})

现在,一切都按预期工作 - 无需刷新 url。

关于Laravel API - 身份验证在重新加载页面后立即生效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46112610/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com