這次帶給大家token怎麼儲存在客戶端localStorage內,token儲存在客戶端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裡的屬性。
我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#
以上是token怎麼儲存在客戶端localStorage內的詳細內容。更多資訊請關注PHP中文網其他相關文章!