vue生成token保存在客户端localStorage中实例
本文主要介绍了vue生成token保存在客户端localStorage中的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据。
我们后端有这样一个接口：
http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb
其实就向clients(理解为用户表即可)里面去生成一个token
这里的client_appid 就相当于用户名，client_appkey 就相当于密码。
这样后端认证之后会生成一个access-token，我们需要把这个access-token 保存在客户端。
注意：我们前端一般部署在另外的服务器上，会跨域，后端要处理跨域的问题，在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');前端的套路
注意，我们项目既然早已用上了VueX，那么我肯定就要在Store(vuex里的概念)里面来创建一个module。
我们新建了一个UsersModule.js 来处理用户登录的业务，注意不要忘记在入口文件users-index.js 中引入。如果我们的『会员后台』也需要用户相关数据，也要引入。
在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("请求失败进入这里")
});
}
}
}actions部分：我们写了一个userLogin()方法，来发送http请求后端服务器，请求成功返回的数据调用在mutations部分定义的setUser()方法保存到客户端。
注意：actions里的userLogin()方法，是供在用户登录页调用的，也就是userslogin.vue里。
所以来到userlogin.vue，修改如下代码：
我们来测试一下，有没有成功保存到客户端的localStorage 中：
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、如果我们的会员后台
http://localhost:8080/member
也需要获取用户的登录信息，比如用户名。来显示到导航栏上。
首先是应该在会员后台模块的入口文件member-index.js中：
//引入Module
import ResModule from './../Store/modules/ResModules';
import UsersMoule from "./../Store/modules/UsersModule";
const vuex_config = new Vuex.Store({
modules: {
res:ResModule,
users:UsersMoule
}
});然后我们就可以在，比如导航栏组件navbar.vue中：
<a href="##" rel="external nofollow" >{{this.$store.state.users.currentUser.UserName}}</a>通过这样的方式，访问users里的属性。
相关推荐：
Atas ialah kandungan terperinci vue生成token保存在客户端localStorage中实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Stock Market GPT
Penyelidikan pelaburan dikuasakan AI untuk keputusan yang lebih bijak
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
![Pelanggan VMware Horizon membeku atau terhenti semasa menyambung [Betulkan]](https://img.php.cn/upload/article/000/887/227/170942987315391.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Pelanggan VMware Horizon membeku atau terhenti semasa menyambung [Betulkan]
Mar 03, 2024 am 09:37 AM
Apabila menyambung ke VDI menggunakan klien VMWareHorizon, kami mungkin menghadapi situasi di mana aplikasi membeku semasa pengesahan atau blok sambungan. Artikel ini akan meneroka isu ini dan menyediakan cara untuk menyelesaikan situasi ini. Apabila klien VMWareHorizon mengalami masalah pembekuan atau sambungan, terdapat beberapa perkara yang boleh anda lakukan untuk menyelesaikan isu tersebut. Betulkan klien VMWareHorizon membeku atau tersekat semasa menyambung Jika klien VMWareHorizon membeku atau gagal menyambung pada Windows 11/10, ikuti penyelesaian yang dinyatakan di bawah: Semak sambungan rangkaian Mulakan semula klien Horizon Semak status pelayan Horizon Kosongkan cache klien Betulkan Ho
![Pelanggan VMware Horizon tidak boleh dibuka [Betulkan]](https://img.php.cn/upload/article/000/887/227/170835607042441.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Pelanggan VMware Horizon tidak boleh dibuka [Betulkan]
Feb 19, 2024 pm 11:21 PM
VMware Horizon Client membantu anda mengakses desktop maya dengan mudah. Walau bagaimanapun, kadangkala infrastruktur desktop maya mungkin mengalami masalah permulaan. Artikel ini membincangkan penyelesaian yang boleh anda ambil apabila klien VMware Horizon gagal dimulakan dengan jayanya. Mengapa klien VMware Horizon saya tidak boleh dibuka? Apabila mengkonfigurasi VDI, ralat mungkin berlaku jika klien VMWareHorizon tidak dibuka. Sila sahkan bahawa pentadbir IT anda telah memberikan URL dan bukti kelayakan yang betul. Jika semuanya baik-baik saja, ikuti penyelesaian yang dinyatakan dalam panduan ini untuk menyelesaikan isu tersebut. Betulkan Klien VMWareHorizon Tidak Dibuka Jika VMW tidak dibuka pada komputer Windows anda
Bagaimana untuk menyelesaikan masalah token log masuk tidak sah
Sep 14, 2023 am 10:57 AM
Masalah token log masuk tidak sah boleh diselesaikan dengan menyemak sambungan rangkaian, menyemak tempoh sah token, mengosongkan cache dan kuki, menyemak status log masuk, menghubungi pembangun aplikasi dan mengukuhkan keselamatan akaun. Pengenalan terperinci: 1. Semak sambungan rangkaian, sambung semula ke rangkaian atau tukar persekitaran rangkaian 2. Semak tempoh sah token, dapatkan token baharu, atau hubungi pembangun aplikasi 3. Kosongkan cache dan kuki, kosongkan penyemak imbas; cache dan Cookie, dan kemudian log masuk ke aplikasi sekali lagi 4. Semak status log masuk.
Perkara yang perlu dilakukan jika token log masuk tidak sah
Sep 14, 2023 am 11:33 AM
Penyelesaian kepada token log masuk yang tidak sah termasuk menyemak sama ada token telah tamat tempoh, menyemak sama ada token itu betul, menyemak sama ada token telah diganggu, menyemak sama ada token sepadan dengan pengguna, mengosongkan cache atau kuki, menyemak sambungan rangkaian dan status pelayan , log masuk semula atau meminta token baharu Hubungi sokongan teknikal atau pembangun, dsb. Pengenalan terperinci: 1. Semak sama ada Token telah tamat tempoh Token log masuk biasanya mempunyai tempoh sah yang ditetapkan Setelah tempoh sah melebihi, ia akan dianggap tidak sah, dsb.
Panduan Pembangunan Klien PHP MQTT
Mar 27, 2024 am 09:21 AM
MQTT (MessageQueuingTelemetryTransport) ialah protokol penghantaran mesej ringan yang biasa digunakan untuk komunikasi antara peranti IoT. PHP ialah bahasa pengaturcaraan sisi pelayan yang biasa digunakan yang boleh digunakan untuk membangunkan klien MQTT. Artikel ini akan memperkenalkan cara menggunakan PHP untuk membangunkan klien MQTT dan memasukkan kandungan berikut: Konsep asas protokol MQTT Pemilihan dan contoh penggunaan perpustakaan klien PHPMQTT: Menggunakan klien PHPMQTT untuk menerbitkan dan
Mengapakah localstorage tidak berjaya menyimpan data?
Jan 03, 2024 pm 01:41 PM
Mengapakah menyimpan data ke storan setempat sentiasa gagal? Memerlukan contoh kod khusus Dalam pembangunan bahagian hadapan, kami selalunya perlu menyimpan data pada bahagian penyemak imbas untuk meningkatkan pengalaman pengguna dan memudahkan capaian data seterusnya. Localstorage ialah teknologi yang disediakan oleh HTML5 untuk storan data sebelah pelanggan Ia menyediakan cara mudah untuk menyimpan data dan mengekalkan kegigihan data selepas halaman dimuat semula atau ditutup. Walau bagaimanapun, apabila kami menggunakan storan setempat untuk penyimpanan data, kadangkala
Langkah dan langkah berjaga-jaga untuk menggunakan storan setempat untuk menyimpan data
Jan 11, 2024 pm 04:51 PM
Langkah dan langkah berjaga-jaga untuk menggunakan localStorage untuk menyimpan data Artikel ini memperkenalkan terutamanya cara menggunakan localStorage untuk menyimpan data dan menyediakan contoh kod yang berkaitan. LocalStorage ialah cara menyimpan data dalam penyemak imbas yang menyimpan data setempat ke komputer pengguna tanpa melalui pelayan. Berikut ialah langkah dan perkara yang perlu diberi perhatian apabila menggunakan localStorage untuk menyimpan data. Langkah 1: Semak sama ada penyemak imbas menyokong LocalStorage
Apakah pelanggan mudah alih
Aug 16, 2023 pm 01:40 PM
Pelanggan mudah alih merujuk kepada aplikasi yang berjalan pada telefon pintar dan menyediakan pengguna dengan pelbagai fungsi dan perkhidmatan dalam bentuk pelanggan asli atau pelanggan web. Pelanggan mudah alih boleh dibahagikan kepada dua bentuk: klien asal dan klien web merujuk kepada aplikasi yang ditulis untuk sistem pengendalian tertentu menggunakan bahasa pengaturcaraan dan alat pembangunan tertentu Kelebihan pelanggan web ialah mereka mempunyai keserasian merentas platform. , boleh berjalan pada peranti berbeza tanpa sekatan sistem pengendalian, tetapi berbanding dengan klien asli, prestasi dan pengalaman pengguna klien web mungkin berkurangan.
