In Vue, save the user logon status instance code and Log On As A vue user.

In Vue, save the user logon status instance code and Log On As A vue user.

First, we assume that the logon component (register. vue) is a sub-component of the App. vue component and enters the logon component through a route.

After you click "Log on" in the logon component, a user name, my App, will be uploaded to the background. in the vue component, you need to get the user name and change the above "Login registration" to "User Name ".

To ensure that the user name does not disappear after refreshing, sessionStorage is used here.

The Code is as follows:

In register. vue, click Login to trigger the signIn method.

   signIn(){    this.formData = $(".form").serialize();    var that = this;    this.$http.get("/api/user", this.formData)     .then(response => {      that.userName = response.data.data.user.userName;      that.userHead = response.data.data.userHead;      that.$emit('userSignIn', that.userName);     })     .catch(error => {      console.log(error);     });   }

Here, to test my direct mock data, the actual situation should be this. $ http. post.

The point here is that

 that.$emit('userSignIn', that.userName);

Pass a value to the parent component (App. vue)

App. vue code HTML

<keep-alive>   <router-view @userSignIn="userSignIn"></router-view></keep-alive>

App. vue code JS

Export default {data () {return {userName: sessionStorage. userName }}, methods: {// sub-component (register) transfers the user name to userSignIn (userName) {sessionStorage. userName = userName; this. userName = sessionStorage. userName ;}}}

In this way, the parent component can use the user name to maintain the logon status, and because sessionStorage is used, the page can also be refreshed.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.