打赏作者

Laravel Vue SPA - 保持用户登录态

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

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

登录并参与讨论

7年前

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

7年前

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

JellyBool 回复 datavotee

7年前

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

7年前

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

解决办法： 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

7年前

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

JellyBool 回复 dppppp

7年前

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

Ericxie 回复 JellyBool

6年前

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

JellyBool 回复 Ericxie

6年前

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

Ericxie 回复 JellyBool

6年前

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

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

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

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

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

@jellybool

JellyBool 回复 Ericxie

6年前

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

jasester 回复 4143920

7年前

按照你的写法在每个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

7年前

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

7年前

关于登录这块发现几个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

7年前

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

liujun 回复 JellyBool

7年前

jelly我这个方法可行吗

liujun 回复 thirdriver

7年前

个人愚见—>
再写了一个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')
    }
}

5年前

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