技術(shù)應(yīng)用
js-cookie + vuex + localStorage 做數(shù)據(jù)持久化
阿克陶網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),阿克陶網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為阿克陶1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的阿克陶做網(wǎng)站的公司定做！
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暴露出來(lái)的方法
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 gettersstore.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
以上就是整個(gè)登錄態(tài)的設(shè)定
在項(xiàng)目中的使用，如下
點(diǎn)擊登錄后
this.$store.dispatch('login', {userName: userName, password: password}).then((res) => {
console.log(res)
if(!res) {
// 登錄成功后的邏輯
} else {
// 登錄失敗后的邏輯
}
})
點(diǎn)擊退出后
this.$store.dispatch('logout', userId).then((res) => {
if (!res) {
// 退出成功的邏輯
}
else {
// 退出失敗的邏輯
}
})
需要特別注意的一點(diǎn)，vuex在頁(yè)面刷新之后會(huì)消失掉.
以上所述是小編給大家介紹的vue后臺(tái)系統(tǒng)登錄管理詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
