Laravel Vue SPA - 保持用户登录态
打赏作者

Laravel Vue SPA - 保持用户登录态

Laravel Vue 开发 SPA 应用 >> Laravel Vue SPA - 保持用户登录态 视频发布于 2017-10-16

前面的视频我们遇到的问题是:在用户手动刷新页面的时候,用户登录状态就会丢失,所以本节视频就来解决这个问题,并由此理解 Vuejs 的 SPA 整个生命周期。顺便也解决了两个另外的小问题:表单验证提交和登录后 guest 验证
imcode

登录的时候,密码错误,怎么提示,而且阻止进入下一个环节

datavotee

老师什么时候出下一期视频?期待中…

JellyBool 回复 datavotee

我在找房子租,搬家中。。。

4143920

发现问题:需要点击两次登录才能除服路由跳转

解决办法: 1. route.js 替换 Store.state.authenticated 为 Store.state.AuthUser.authenticated
2. 在每一个action前加return: login.js 和 auth-user.js

loginRequest({dispatch},formData) {
            return axios.post( .....


     setAuthUser({commit,dispatch}){
           return axios.get(.....
dppppp 回复 4143920

我也发现这个问题,但是纠结半天没弄出来,还是你厉害。但是为什么加上这个return 就好了呢?

JellyBool 回复 dppppp

这个感觉应该是异步的原因吧。

Ericxie 回复 JellyBool

jelly老师,我发现这样处理会出现另一个bug, 登陆之后点击用户中心的话会跳转到主页,我看了下控制台,其实点击个人中心的时候,先是跳转到login页面然后因为 authenticated == true,所以继续跳到home页面,感觉是异步的原因路径没及时更新,请问有更好的处理方式吗?@jellybool

JellyBool 回复 Ericxie

嗯哼,你可以把 chrome 开发者工具的跳转过程截图我看看么?

Ericxie 回复 JellyBool

为了调试,我在routes.js 加了两行代码,想把路由钩子的to打印出来看看

c3

这是用户从首页点击login到登录成功位置的控制台输出,一切都正常

c4

当我再次点击profile的时候,发现跳转到首页了,控制台显示路由跳转到了login然后再到home

c5

我点击profile之前insepct了一下profile的路径,发现是正常的

c6

但是不知道为什么路由却跳到了login,我发现如果登录成功之后,如果刷新一下页面再点击profile则不会跳转到login,这个是什么问题呢?

@jellybool

JellyBool 回复 Ericxie

这个问题阔以,我仔细看看

jasester 回复 4143920

按照你的写法在每个antions前面都加了return ,但是 在LoginForm.vue 里

this.$store.dispatch('loginRequest', formData).then(response => {
    console.log('success ' + response);
    this.$router.push({ name:'home' });
}).catch(error => {
    console.log('error '+response);
})

里面response 还是undefined ,怎么回事?

JellyBool 回复 4143920

这个我下个视频就说一下,这个视频确实写错了

thirdriver

关于登录这块发现几个BUG,教主有时间看下

router.beforeEach((to, from, next) {
   // 判断是否登录其实判断是否有token无意义 因为这个token 可能是过期
  Store.state.AuthUser.authenticated || JWTToken.getToken()
  })

 // 如果只判断Store.state.AuthUser.authenticated 又出现另一个bug 就是强制刷新浏览器时 
// App.vue中 这段代码是异步执行 会导致 router中Store.state.AuthUser.authenticated=false 但是后续数据更新Store.state.AuthUser.authenticated=true的尴尬情况
   create() {
            if (JWTToken.getToken())
            {
                this.$store.dispatch('setAuthUser');
            }
        },
// 于是我的改进方法时 将这些判断放到router中 针对 存在token过期 Store.state.AuthUser.authenticated=false  强制刷新浏览器时的情况
// 当 Store.state.AuthUser.authenticated=true且存在token时 是否认为该用户处于登录状态呢?如果认为处于登录状态但是此时可能token处于过期状态的  而Store.state.AuthUser.authenticated也是可能一直为true的

  

这是目前登录保持这块遇到的坑 想知道有没有更优雅的或者最佳的实践方式

JellyBool 回复 thirdriver

异步执行的 bug 是否可以加 async 来解决?

liujun 回复 JellyBool

jelly我这个方法可行吗

liujun 回复 thirdriver

个人愚见—>
再写了一个action和mutation,用window.localstorage.getItem()来判断用户是否登录(用户登录的时候把name,email也存到storage里面),如下:
App组件:

created(){
      if(Cookie.getToken()) this.$store.dispatch('loginRefresh')
    }

store:

mutations:{
    login(state,payload){
        state.authenticated=true;
        state.name=payload.name;
        state.email=payload.email;
    },
    loginRefresh(state){
        state.authenticated=true;
        state.name=window.localStorage.getItem('name');
        state.email=window.localStorage.getItem('email');
    }
},
actions:{
    login({commit},payload){
        axios.post(`http://vue-spa/api/login`,payload)
            .then(response=>{

                Cookie.setToken(response.data.access_token);
                window.localStorage.setItem('name',response.data.name);
                window.localStorage.setItem('email',payload.email);

                commit('login',{name:response.data.name,email:payload.email})
            })
    },
    loginRefresh({commit}){
        commit('loginRefresh')
    }
}
折花_

老师有源码下载嘛 我想学习看看