vue 后台系统 获取用户名并显示

1.安装依赖

npm install js-cookie --save

2.在登录页面引入 import Cookies from "js-cookie"

login.vue

import Cookies from "js-cookie"
export default {
  data() {
      return {
         loginForm: {
          name: "",
          password: "",
        },
        activeName:'first',
        rules: {
          name: [
            { required: true, message: '账号不能为空', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
          ],
        },
      };
  },
  methods: {
    goToLogin() {  
      this.$refs["loginForm"].validate((valid) => {
        if(valid){
          Cookies.set('name',this.loginForm.name)
          login(this.loginForm).then(res=>{
            if(res.message == 'ok'){
              this.$message.success('登陆成功')
              sessionStorage.setItem('token',res.token)
              this.$router.push('/home')
            }else{
              this.$message.error(res.message)
            }
          })
        }else{
          this.$message.error('登录失败')
          return false
        }
      });
    },
    resetLoginForm() {
      this.$refs["loginForm"].resetFields();
    },
    handleClick(){}
  },
  components:{
    register
  }
};

3.页面使用

        home.vue

 

 4.最后效果