next 3 + WP REST API + Pinia + local.存储，是每个用户登录的好方法吗?

Question

我正在开发的应用程序包括用于前端的nux3和用于后端的Wordpress。使用REST API将数据从后端传递到前端。应用程序是一种CMS，通过这种方式，所有路由都受到中间件的保护，确保用户正确登录。中间件检查本地存储是否存在，因为它是在用户能够登录时创建的。

:

1. 对于每个路由，中间件检查本地存储userAuthentication是否存在，如果不存在，则重定向到/login。此中间件全局运行，但仅在客户端运行。

2. 当用户尝试进入应用程序时，使用用户填写的凭据向WP后端发出POST调用。如果端点返回CODE 200，则将数据保存在PINIA存储中，然后使用响应的数据(包括令牌)创建一个本地存储。此时，用户可以在所有受保护的路由中导航。

3. 当用户注销时，本地存储被销毁，然后他将被重定向到/login。

我想问你:

1. 这是一个安全的方法吗?
2. 服务器是受wordpress保护的还是我可以创建一个服务器中间件?
3. 可以任何陌生人访问我的应用程序创建一个具有相同名称的本地存储?

感谢您的回答和建议。

中间件/auth.global.ts

export default defineNuxtRouteMiddleware((to, from) => {
// isAuthenticated() is an example method verifying if an user is authenticated
if (typeof window !== 'undefined') {
const useStateLocalStorage = JSON.parse(localStorage.getItem('userAuthentication'));
if (!useStateLocalStorage) {
if (from.path === '/login') {
return abortNavigation()
}
if (to.path !== '/login') {
return navigateTo('/login')
}
}
if (useStateLocalStorage) {
if (to.path === '/login') {
return abortNavigation()
}
}
}
})

/login.vue

import { useUserStore } from "~/store/userAuth";
const config = useRuntimeConfig();
const signinForm = ref({ username: "", password: "" });
const userStore = useUserStore();
const signIn = async () => {
const response = await $fetch(config.public.apiBaseUrl + '/wp-json/jwt-auth/v1/token',
{
method: "post",
body: {
'username': signinForm.value.username,
'password': signinForm.value.password
}
})
.then((response) => {
//SUCCESS
//console.log('LOGIN SUCCESS', response);
//SAVE USER DATA IN PINIA STORE
userStore.IsAuth = true;
userStore.token = response['data']['token'];
userStore.username = response['data']['displayName'];
userStore.email = response['data']['email'];
userStore.firstName = response['data']['firstName'];
userStore.lastName = response['data']['lastName'];
//DEBUG
console.log(userStore.IsAuth)
console.log(userStore.token)
console.log(userStore.username)
console.log(userStore.email)
console.log(userStore.firstName)
console.log(userStore.lastName)
//NAVIGATE TO HOME
navigateTo('/')
})
.catch((error) => {
console.log('LOGIN ERROR', error)
});
//console.log(response)
signinForm.value = {username: "", password: ""};
}
userStore.$subscribe((mutation, state) => {
localStorage.setItem('userAuthentication', JSON.stringify(state))
})

存储/userAuth.js

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => {
return {
token: null,
username: null,
email: null,
firstName: null,
lastName: null,
IsAuth: false
}
},
persist: true,
actions: {
userUpdate(payload) {
//localStorage.setItem('user-auth', payload)
this.user = payload;
this.IsAuth = payload;
},
tokenUpdate(payload) {
//localStorage.setItem('user-auth', payload)
this.token = payload;
},
}
})

Answer 1

不熟悉wordpress后端，但我建议一般避免将敏感用户数据放在本地存储，因为它暴露给第三方脚本。