Vue的前端登录，修改已登录用户信息，用户登录信息回显，安全退出

一、登录模块

登录同时，将token(Jwt鉴权)、和用户对象存入sessionStorage

将对象存入要JSON.stringify转字符串存

<script>
import { login } from "../api";
export default {
  data() {
    return {
      blogger: {}
    };
  },
  methods: {
    async login() {
      let { data: baseResult } = await login(this.blogger);
      if (baseResult.code == 1) {
        sessionStorage.setItem("token", baseResult.other.token);
        sessionStorage.setItem("blogger", JSON.stringify(baseResult.other.blogger));
        this.$router.push("/welcome");
      } else {
        this.$message.error(baseResult.message);
      }
    }
  },
  //页面标题  
  mounted() {
    document.title = "那一天，你终于想起了自己的... ---柒";
  }
};
</script>

api.js

/** ajax axios */
import axios from 'axios'
import { Message } from 'element-ui'
import Mock from 'mockjs'
import router from './router'

/** axios 基本项设置 */
axios.defaults.baseURL = 'http://localhost:9910/api'
axios.defaults.timeout = 3000




axios.interceptors.request.use(request => {
  //每一次请求头中，请求头需要携带token
  //获得token
  let token = sessionStorage.getItem('token')
  //有设置就放行
  if (token) {
    request.headers.authorization = token
  }
  return request
}, error => { });


axios.interceptors.response.use(response => {
      // 放行
      return response
      }, error => {
      // 错误判断
      if(error.response.status==403){
      router.push('/login')
      }
      return Promise.reject(error)
      })




/** 登录操作 */
export function login(blogger) {
    return axios.post('/bloggerservice/blogger/login', blogger)
}

/** 修改个人信息 */
export function editbr(blogger){
  return axios.put('/bloggerservice/blogger',blogger)
}

/** 退出 */
export function layout() {
  return axios.get('/bloggerservice/blogger')
}

二、修改登录用户信息，已登录用户信息回显

其实就是sessionStorage.getItem取出来之前登录存的对象，用JSON.parse转一下定义变量取出来，绑定data里的对象。

<script>
import { editbr } from "../../api";
export default {
  data() {
    return {
      blogger: {}
    };
  },
  methods: {
    async edit() {
      let { data: baseResult } = await editbr(this.blogger);
      sessionStorage.setItem("blogger", JSON.stringify(baseResult.data));
      this.$message.success(baseResult.message);
      this.$router.push("/index");
    }
  },
  async created() {
    let b = sessionStorage.getItem("blogger");
    this.blogger = JSON.parse(b);
  }
};
</script>

三、退出登录

后台是清session的方法equest.getSession().invalidate(); 这里session里面存的只有用户数据，考虑到以后可能有其他数据，应该用 sessionStorage.removeItem("blogger");

<script>
import { layout } from "../../api";
export default {
  data() {
    return {
      dialogVisible: true
    };
  },
  methods: {
    async layout() {
      let { data: baseResult } = await layout();
      //sessionStorage.clear();
      //localStorage.clear();
      sessionStorage.removeItem("blogger");
      this.$message.success(baseResult.message);
      this.$router.push("/login");
    }
  }
};
</script>