詳解vue后臺系統(tǒng)登錄態(tài)管理
技術應用
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)的設定
在項目中的使用,如下
點擊登錄后
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)登錄管理詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
Vue+thinkphp5.1+axios實現(xiàn)文件上傳
這篇文章主要為大家詳細介紹了Vue+thinkphp5.1+axios實現(xiàn)文件上傳,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05
vuejs+element UI點擊編輯表格某一行時獲取內容填入表單的示例
這篇文章主要介紹了vuejs+element UI點擊編輯表格某一行時獲取內容填入表單的示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-10-10
element-ui表單提交自動清空隱藏表單值實現(xiàn)
這篇文章主要為大家介紹了element-ui表單提交自動清空隱藏表單值實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07
vant picker+popup 自定義三級聯(lián)動案例
這篇文章主要介紹了vant picker+popup 自定義三級聯(lián)動案例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue項目如何實現(xiàn)Echarts在label中獲取點擊事件
這篇文章主要介紹了vue項目如何實現(xiàn)Echarts在label中獲取點擊事件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10

