So speichern Sie das Token im lokalen Speicher des Clients

Dieses Mal zeige ich Ihnen, wie Sie den Token im lokalen Speicher des Clients speichern. Was sind die Vorsichtsmaßnahmen, wenn der Token im lokalen Speicher des Clients gespeichert wird? ein Blick.

Unser Backend hat eine solche Schnittstelle:

http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb

Generieren Sie einfach ein Token in Clients (verstanden als Benutzertabelle)

Dabei entspricht client_appid dem Benutzernamen und client_appkey dem Passwort.

Auf diese Weise wird nach der Backend-Authentifizierung ein access-token generiert. Dieses access-token müssen wir auf dem Client speichern.

Hinweis: Unser Front-End wird im Allgemeinen auf einem anderen Server bereitgestellt und muss domänenübergreifende Probleme bewältigen. Sie können den folgenden Code in PHP schreiben:

//指定允许其他域名访问
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');

Front-End-Routinen

Beachten Sie, dass ich, da unser Projekt bereits VueX verwendet hat, auf jeden Fall ein Store innerhalb von module erstellen werde (ein Konzept in vuex).

Wir haben ein neues UsersModule.js für die Benutzeranmeldung erstellt. Vergessen Sie nicht, es in die Eintragsdateiusers-index.js einzufügen. Benötigt unser „Member Backstage“ auch nutzerbezogene Daten, müssen diese ebenfalls eingebracht werden.

Ändern Sie in users-index.js:

//引入模块
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}){
   // 在这里把用户名和token保存起来
   localStorage.setItem("currentUser_name",user_name);
   localStorage.setItem("currentUser_token",user_token);
  }
 },
 actions:{
  userLogin(context,{user_name,user_pass}){
   // 发送get请求做权限认证(真实开发建议用post的方式)
   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 != ""){
       // 后端API验证通过
       // 调用上面mutations里定义的方法
       context.commit("setUser",{"user_name":user_name,"user_token":token});
      }
     }else{
      alert("用户名密码错误");
     }
    },(res)=>{
     alert("请求失败进入这里")
    });
  }
 }
}

Aktionsteil: Wir haben eine userLogin()-Methode geschrieben, um http-Anfragen an den Backend-Server zu senden. Die von der Anfrage erfolgreich zurückgegebenen Daten werden auf dem Client gespeichert, indem die im Mutationsteil definierte setUser()-Methode aufgerufen wird.

Hinweis: Die userLogin()-Methode in Aktionen dient zum Aufrufen auf der Benutzeranmeldeseite, also in „userslogin.vue“.

Kommen Sie also zu userlogin.vue und ändern Sie den folgenden Code:

Testen wir, ob es erfolgreich im localStorage des Clients gespeichert wurde:

  methods:{
   login(){
    // 这个验证是element-ui框架提供的方法
    this.$refs["users"].validate(function (flag) {
     if(flag){
      /*localStorage.setItem("currentUser",this.UserModel.user_name);
      alert("用户登录成功");*/
      this.$store.dispatch("userLogin",{"user_name":this.UserModel.user_name,"user_pass":this.UserModel.user_pass})
     }else{
      alert("用户名密码必填");
     }
    }.bind(this));
   }
  }

2. Wenn unser Mitgliedschafts-Backend

http://localhost:8080/member

Es ist auch erforderlich, die Anmeldeinformationen des Benutzers zu erhalten, beispielsweise den Benutzernamen. zur Anzeige in der Navigationsleiste.

Zunächst sollte es in der Eintragsdatei member-index.js des Mitglieder-Backend-Moduls stehen:

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

Dann können wir zum Beispiel in der Navigationsleistenkomponente navbar.vue:

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

Greifen Sie auf diese Weise auf das -Attribut in Benutzern zu.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonSo speichern Sie das Token im lokalen Speicher des Clients. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!