在vue js中，Vuex被用來進行狀態(tài)管理和數(shù)據(jù)流的控制。在Vuex中，有一個重要的功能就是“登錄”。登錄是指用戶在訪問某個應(yīng)用時，需要輸入個人信息才能得到權(quán)限。Vuex的登錄功能可以使管理員和普通用戶的權(quán)限得以區(qū)分，保護應(yīng)用的數(shù)據(jù)安全。

在Vuex中，登錄功能分為兩種：登錄和退出。其中，登錄必須包含“用戶名”和“密碼”這兩個重要信息。管理員和普通用戶的權(quán)限在進行登錄時就需要分別注冊。因此，在前端路由設(shè)置中，需要為管理員和普通用戶分別單獨設(shè)置路由。

// routes.js
const routes = [
{
path: '/admin'
component: Admin,
meta: { requiresAuth: true, role: 'admin' }
},
{
path: '/user'
component: User,
meta: { requiresAuth: true, role: 'user' }
},
]

在上面的代碼中，“requiresAuth”表示當前路由是否需要登錄才能訪問，“role”表示當前登錄用戶的角色。當用戶進行登錄操作時，Vuex將獲取用戶輸入的信息并將其存入store中。為了保護用戶信息的安全，存儲在store中的密碼需要進行加密。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import bcrypt from 'bcryptjs'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
user: {},
loggedIn: false,
},
mutations: {
loginUser(state, data) {
state.user = data.user 
state.loggedIn = true 
},
logoutUser(state) {
state.user = {}
state.loggedIn = false 
},
},
actions: {
async loginUser({ commit }, { username, password }) {
const user = await fetchUserByUsername(username)
if (!user) {
throw new Error('User not found')
} else {
const isMatch = await bcrypt.compare(password, user.password)
if (!isMatch) {
throw new Error('Invalid Password')
} else {
commit('loginUser', { user })
}
}
},
},
})

在上面的代碼中，當用戶進行登錄操作時，Vuex將觸發(fā)“l(fā)oginUser”mutation。該mutation用于將用戶信息存入store，并將loggedIn設(shè)置為true。在登出操作中，“l(fā)ogoutUser”mutation會將store中的user和loggedIn重置。

在登錄操作中，如果用戶名和密碼正確，則在store中存儲相應(yīng)的用戶信息。在后續(xù)的應(yīng)用中，通過Vuex store來判斷用戶權(quán)限，進而決定是否給用戶顯示某些功能或頁面。

總之，在Vue中，Vuex的登錄功能非常重要，它決定了應(yīng)用的安全性和用戶權(quán)限的管理。以上便是關(guān)于Vuex登錄功能的詳細介紹。