The method used by vue to generate a token and save it in the client localStorage.

The method used by vue to generate a token and save it in the client localStorage.

We have learned that you can uselocalStorageSave data on the client (browser.

The backend has the following interface:

Http: // localhost/yiiserver/web/index. php/token? Client_appid = aaa & client_appkey = bbb

In fact, we can generate a token to the clients (which can be understood as a user table ).

 

Hereclient_appidIt is equivalent to the user name,client_appkeyIt is equivalent to a password.

In this way,access-token, We needaccess-tokenSave it on the client.

Note: our front-end is usually deployed on another server, and cross-origin occurs. The backend must handle cross-origin issues. You can write the following code in PHP:

// Specify to Allow other domain names to Access the header ("Access-Control-Allow-Origin: *"); header ("Access-Control-Allow-Methods: GET, POST "); header ('access-Control-Allow-Headers: X-Requested-With, content-type, if-modified-since ');

Frontend routines

Note that our project has already been usedVueXSo I will definitelyStore(Vuex concept) to createmodule.

We createdUsersModule.jsTo process user login services, be sure not to forget to log on to the portal Fileusers-index.js. If our "member background" also requires user-related data, we should also introduce it.

Inusers-index.jsModify:

// Import the module import ResModule from '. /.. /Store/modules/ResModules '; import UsersModule from ". /.. /Store/modules/UsersModule "; const vuex_config = new Vuex. store ({modules: {res: ResModule, users: UsersModule }});

1. UsersModule. js

Import Vue from "vue"; export default {state: {currentUser: {get UserName () {return localStorage. getItem ("currentUser_name") ;}, get UserToken () {return localStorage. getItem ("currentUser_token") ;}}, mutations: {setUser (state, {user_name, user_token}) {// Save the user name and token here as localStorage. setItem ("currentUser_name", user_name); localStorage. setItem ("currentUser_token", user_token) ;}}, actions: {userL Ogin (context, {user_name, user_pass}) {// send a get request for permission authentication (post is recommended for real development) let url = "http: // localhost/yiiserver/web/index. php/token? Client_appid = "+ user_name +" & client_appkey = "+ user_pass; console. log (url); Vue. http. get (url ). then (res) => {if (res! = Null & res. body! = Undefined & "access-token" in res. body) {var token = res. body ["access-token"]; if (token! = "") {// The backend API is verified. // call the method context defined in mutations above. commit ("setUser", {"user_name": user_name, "user_token": token}) ;}} else {alert ("username and password error") ;}, (res) =>{ alert ("failed request entry here ")});}}}

Actions: We wroteuserLogin()Method to send an http request to the backend server. The data returned after the request is successful is called in the mutations section.setUser()Method To save to the client.

Note:userLogin()The method is called on the user login page, that is, userslogin. vue.

So comeuserlogin.vueModify the following code:

Let's test whether the file is successfully saved to the client.localStorageMedium:

Methods: {login () {// this verification is the method provided by the element-ui framework. this. $ refs ["users"]. validate (function (flag) {if (flag) {/* localStorage. setItem ("currentUser", this. userModel. user_name); alert ("User Logon successful"); */this. $ store. dispatch ("userLogin", {"user_name": this. userModel. user_name, "user_pass": this. userModel. user_pass})} else {alert ("username and password required ");}}. bind (this ));}}

2. If our membership background

Http: // localhost: 8080/member

You also need to obtain the user's login information, such as the user name. In the navigation bar.

The first is the entry file of the member background module.member-index.jsMedium:

// Introduce Moduleimport ResModule from '. /.. /Store/modules/ResModules '; import UsersMoule from ". /.. /Store/modules/UsersModule "; const vuex_config = new Vuex. store ({modules: {res: ResModule, users: UsersMoule }});

Then we can:

<a href="##" rel="external nofollow" >{{this.$store.state.users.currentUser.UserName}}</a>

Access the attributes in users in this way.

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