Comment stocker le jeton dans le client localStorage

Cette fois, je vais vous montrer comment stocker le token dans le localStorage du client. Quelles sont les précautions lorsque le token est stocké dans le localStorage du client. Voici un cas pratique, prenons. un regard.

Notre backend a une telle interface :

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

En fait, il suffit de générer un token dans les clients (entendu comme table utilisateur)

Ici, client_appid est équivalent au nom d'utilisateur et client_appkey est équivalent au mot de passe.

De cette façon, un access-token sera généré après l'authentification backend. Nous devons enregistrer ce access-token sur le client.

Remarque : Notre front-end est généralement déployé sur un autre serveur et traversera les domaines. Le back-end doit gérer les problèmes inter-domaines. Vous pouvez écrire le code suivant en PHP :

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

. Routines frontales

Notez que puisque notre projet a déjà utilisé VueX, je vais certainement créer un Store à l'intérieur de module (un concept dans vuex).

Nous avons créé un nouveau UsersModule.js pour gérer l'activité Connexion utilisateur Attention à ne pas oublier de l'introduire dans le fichier d'entréeusers-index.js. Si notre « Member Backstage » a également besoin de données relatives aux utilisateurs, elles doivent également être introduites.

Modifier en 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. UtilisateursModule.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("请求失败进入这里")
    });
  }
 }
}

Partie Actions : Nous avons écrit une méthode userLogin() pour envoyer des requêtes http au serveur backend. Les données renvoyées avec succès par la requête sont enregistrées sur le client en appelant la méthode setUser() définie dans la partie mutations.

Remarque : La méthode userLogin() dans actions permet d'appeler sur la page de connexion de l'utilisateur, c'est-à-dire dans userslogin.vue.

Alors venez sur userlogin.vue et modifiez le code suivant :

Testons s'il est correctement enregistré dans le localStorage du client :

  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. Si notre backend d'adhésion

http://localhost:8080/membre

Il est également nécessaire d'obtenir les informations de connexion de l'utilisateur, telles que le nom d'utilisateur. à afficher dans la barre de navigation.

Tout d'abord, il doit être dans le fichier d'entrée member-index.js du module backend membre :

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

On peut alors, par exemple, dans le composant de la barre de navigation navbar.vue :

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

De cette façon, accédez à l'attribut dans les utilisateurs.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!