The method used by vue to generate a token and save it in the client localStorage.
We have learned that you can uselocalStorage
Save 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_appid
It is equivalent to the user name,client_appkey
It is equivalent to a password.
In this way,access-token
, We needaccess-token
Save 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 usedVueX
So I will definitelyStore
(Vuex concept) to createmodule
.
We createdUsersModule.js
To 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.js
Modify:
// 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.vue
Modify the following code:
Let's test whether the file is successfully saved to the client.localStorage
Medium:
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.js
Medium:
// 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.