vue保持登录状态(sessionstorage配合vuex来使用)

在项目开发过程中使用的是 vue 和 vue-router,用户在登录之后,相对应的状态也要发生改变,该隐藏的就隐藏,该显示的用户信息就要显示。

pc端开发简述为以下四个步骤

  1. 用户登录之后,将账号和密码 提交到后台
  2. 后台返回给你 token 。 将token 保存在 sessionstorage 中
  3. 设置请求头,在每次向后端发送请求的时候都要携带 token,作为后端判断用户的标识。
  4. 每次切换页面的时候,肯定要初始化数据,这时候你要在created的时候判断vuex里面是否有用户信息,如果有的话,在渲染用户信息的时候,你就从vuex里面拿值渲染。如果没有的话你再判断本地是否有 token ,如果本地有的话,你就要请求用户的信息然后渲染。并将用户信息提交到 vuex中保存。
  5. vuex里面需要一个变量来保存用户所有信息,方便拿取。还需要一个函数来方便提交用户信息。

使用sessionstorage的原因。

  1. 安全
    在浏览器关闭的时候会将用户信息清除。如果再次访问就会验证登录
  2. 机制比较好
    session与local相比,session在浏览器关闭的时候信息就清除了,但是local是需要人工清除的,使用更加方便。

开发PC端的时候,你可以抽离一个导航栏模块复用,在这个模块里面处理登录状态问题

你可能感兴趣的:(前端)