詳解vue后臺系統(tǒng)登錄態(tài)管理
更新時間：2019年04月02日 11:07:12 作者：Eold
這篇文章主要介紹了vue后臺系統(tǒng)登錄管理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
技術(shù)應(yīng)用
js-cookie + vuex + localStorage 做數(shù)據(jù)持久化
js-cookie
npm i js-cookie --save
vuex
user.js
import { login, logout } from '@/servers/login'
import { getToken, setToken, removeToken } from '@/utils/auth' // 這是上面的js-cookie暴露出來的方法
const user = {
state: {
userInfo: "",
token: getToken(),
roles: []
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
}
},
actions: {
// 用戶名登錄
login({ commit }, userInfo) {
const userName = userInfo.userName.trim()
return new Promise((resolve, reject) => {
login({userName: userName, password: userInfo.password}).then(res => {
if (res.status.statusCode === 0) {
const data = res.result
commit('SET_TOKEN', data.token)
setToken(data.token)
localStorage.setItem('userInfo', JSON.stringify(data))
resolve()
}
else {
resolve(res.status.statusReason)
}
})
.catch(error => {
reject(error)
})
})
},
// 登出
logout({ commit }, userId ) {
return new Promise((resolve, reject) => {
logout({id: userId}).then((res) => {
if (res.status.statusCode === 0) {
commit('SET_TOKEN', '')
removeToken()
localStorage.clear()
resolve()
}
else {
resolve(res.status.statusReason)
}
})
.catch(error => {
reject(error)
})
})
}
}
}
export default user
getter.js
const getters = {
userInfo: state => state.user.userInfo
}
export default getters
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
},
getters
})
export default store
以上就是整個登錄態(tài)的設(shè)定
在項目中的使用，如下
點擊登錄后
this.$store.dispatch('login', {userName: userName, password: password}).then((res) => {
console.log(res)
if(!res) {
// 登錄成功后的邏輯
} else {
// 登錄失敗后的邏輯
}
})
點擊退出后
this.$store.dispatch('logout', userId).then((res) => {
if (!res) {
// 退出成功的邏輯
}
else {
// 退出失敗的邏輯
}
})
需要特別注意的一點，vuex在頁面刷新之后會消失掉.
以上所述是小編給大家介紹的vue后臺系統(tǒng)登錄管理詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在實際的項目中,和后臺的數(shù)據(jù)交互是少不了的,我通常使用的是 axios 庫,所以下面這篇文章主要給大家介紹了關(guān)于vue封裝axios與api接口管理的相關(guān)資料,需要的朋友可以參考下2022-01-01
Vue設(shè)置select下拉框的默認(rèn)選項詳解(select空白bug解決)
最近開始學(xué)習(xí)vue,在學(xué)習(xí)的過程中遇到的問題將記錄在這里,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置select下拉框的默認(rèn)選項(select空白bug解決)的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了element-ui如何在table中使用tooltip問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加問題解決方法【加track-by=''索引''】
這篇文章主要介紹了vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加問題解決方法,結(jié)合實例形式分析了vue.js通過在v-for循環(huán)中添加track-by='索引'解決重復(fù)數(shù)據(jù)無法添加問題相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家介紹了Vue3源碼分析調(diào)度器與watch用法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Vue3+TypeScript+Vite使用require動態(tài)引入圖片等靜態(tài)資源
本文主要介紹了Vue3+TypeScript+Vite使用require動態(tài)引入圖片等靜態(tài)資源，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
這篇文章主要介紹了vue.js綁定事件監(jiān)聽器的方法,結(jié)合實例形式分析了vue.js基于v-on事件綁定響應(yīng)鼠標(biāo)點擊相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
下面小編就為大家分享一篇vue實現(xiàn)模態(tài)框的通用寫法推薦，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vite打包項目時,需要去除開發(fā)時加入的console、debugger調(diào)試信息,本文主要介紹了Vite打包時去除console的方法實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-08-08
復(fù)刻畫龍產(chǎn)品vue實現(xiàn)新春氣泡兔
這篇文章主要為大家介紹了復(fù)刻畫龍產(chǎn)品之使用vue實現(xiàn)新春氣泡兔示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01