Laravel API - 重新加载页面后身份验证工作

Posted

技术标签:

【中文标题】Laravel API - 重新加载页面后身份验证工作【英文标题】:Laravel API - Authentication works just after reloading the page 【发布时间】:2018-02-17 03:38:39 【问题描述】:

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


问题:登录后我必须重新加载页面才能成功验证。
登录方式
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();


错误信息 当我重新加载页面时,错误消息消失并且我已成功通过身份验证。
我会很高兴得到任何帮助!

【问题讨论】:

比响应更重要的是失败调用的请求标头。您可以验证令牌是否实际发送?从我看到的情况来看,您只是缺少在登录后设置默认请求标头。可能在应用程序启动时发生一次,因此在重新加载后工作 非常感谢!这正是问题所在!我没有在每个请求中都发送标头! 【参考方案1】:

感谢 Frank Provost,我找到了答案。万一其他人遇到同样的问题: 我没有在每个请求中都传递令牌。 我不得不改变这个

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 - 重新加载页面后身份验证工作的主要内容,如果未能解决你的问题,请参考以下文章

重新路由Laravel后,防止重新加载页面表单

每当页面重新加载时如何使用tomcat身份验证

Laravel 和 Vue 身份验证表单在登录失败时重新加载

使用内置的 Laravel 5.2 身份验证并加载 SPA,然后为所有其他路由加载 Dingo API

Firebase 身份验证在页面重新加载时在 nuxtjs 中间件中为空

重新加载页面后重新使用 UCWA 应用程序