vue怎样解决刷新之后状态的稳定性?

我想实现的一个简单的逻辑是:设置了一个全局变量isLogin,在实现了登陆接口以后,用v-if来判断,如果true则显示退出。如果fasle就显示登陆。默认状态是false未登录。

默认点击“个人中心”以后,需要先登陆才能显示个人中心。

正常是这样的:
image.png
但是明明是登陆状态,只要点击刷新,就又变成默认状态的isLogin=false了:
image.png

请问怎样才能保证刷新之后。仍然显示登陆状态呢?

阅读 1.1k
评论 更新于 2月13日
    5 个回答
    Allan91
    • 1.6k

    全局变量 isLogin 的值为 true 还是 false,应该来自于接口返回字段中来判断。这个接口用于判断用户是否登录。登录过,返回true,设置 isLogin 为 true;否则为 false。

    所以当你刷新,还是会走这个逻辑,先调用接口,看是否登录过。

    btw,你的“笨办法”不可行,当用户手动修改 localstorage 的值,那就可以跳过你的登录逻辑,风险很大。建议看看http权威指南的登录权限部分。

    评论 赞赏 2月13日

      存在浏览器本地中

      评论 赞赏 2月13日

        用笨办法解决了。设置全局属性来判断
        const state={isLogin:window.localStorage.getItem('user')};

        data:
        {state: global.state,}

        <el-menu-item index="/logout" v-if="state.isLogin">
        <span>退出</span>
        </el-menu-item>
        <el-menu-item index="/login" v-else>
        <span>登录</span>
        </el-menu-item>

        评论 赞赏 2月13日
          林枫
          • 348

          main.js文件中需要有请求来判断是否登录,
          这个是否登录状态建议存储在vuex的store中,或localStorage

          评论 赞赏 2月14日

            状态全部交给后端控制

            评论 赞赏 2月14日
              撰写回答

              登录后参与交流、获取后续更新提醒