推荐最新

vue 登录鉴权的问题，错误返回的问题？

使用vue2 做前端的登录页面时。当用户名密码错误时,每次都进入了loginView.vue 的.then部门内容,提示登录成功。我的具体代码如下。1.请各位大神,指正一下,如何修改。2.在这种从api-->store->views 调用传递中，如何保证异常、数据的正确传递，我该怎么优化我的代码？不胜感激 api/auth.js 接口调用 import axios from "axios"; export default { login: function (credentials) { return axios.post(localhost + 'login', credentials) .then(({ data }) => data) // 只返回数据部分，也可以不处理直接返回整个响应 .catch(error => Promise.reject(error)); // 将错误原样返回，以便上层调用者可以处理 } } store/auth.js import AuthApi from '@/api/auth' import axios from 'axios' // 定义模块名 export const auth = { state: { user: null }, getters: { // !! just converts the value to a boolean isLogged: state => !!state.user }, mutations: { setUserData(state, userData) { state.user = userData localStorage.setItem('user', JSON.stringify(userData)) axios.defaults.headers.common.Authorization = `Bearer ${userData.token}` }, clearUserData() { localStorage.removeItem('user') location.reload() } }, actions: { login({ commit }, credentials) { AuthApi.login(credentials) .then(({ data }) => { commit('setUserData', data) return data; // 这里返回数据用于后续操作（可选，视业务需求） }).catch(error => { console.log(error) throw error; // 将错误重新抛出，让组件能够捕获 }) }, logout({ commit }) { commit('clearUserData') } }, } views/LoginView.vue export default { data() { return { email: '', password: '', } }, methods: { login() { this.$store.dispatch('login', { email: this.email, password: this.password }) .then(() => { alert('登录成功') this.$router.push({ name: '/' }) }) .catch((error) => { alert(error.response.data.error) console.log(error) }) } } } 后端接口,用户名, 密码错误时的返回信息 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/2ee6bc65b3ba7470951f4e98e39b60f4.png)

浏览量189

Fronttend

Vuex 实现不同页面间数据同步？

使用VUEX如何实现更新浏览器不同关卡的内容？如下面DEMO，如何实现在page1更新count后，page2不用刷新自动更新？ store/index.js import { createStore } from 'vuex' const store = createStore({ state: { count: 3 }, mutations: { add(state) { state.count += 1 } }, getters: { returnCount: state => { return state.count; }, }, }) export default store page1 {{ count }} computed: { count() { return this.$store.state.count; }, }, methods: { addCount() { store.commit("add"); } } page2 {{ count }} computed: { count() { return this.$store.getters.returnCount } }

浏览量180

万码用户

Vue项目devServer proxy配置不生效的排查方法？

关于跨域配置的问题如图，我需要调用以下请求访问资源 "https://wmprod.oss-cn-shanghai.aliyuncs.com/b/comp/1724809788943_7Vo4.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/b/comp/1724809788943_7Vo4.png) vue.config.js的配置如下（主要是proxy的配置 const path = require('path') module.exports = { lintOnSave:false, runtimeCompiler: true, css: { loaderOptions: { scss: { additionalData:`@import "~@/assets/scss/global.scss";` } } }, chainWebpack: (config) => { //svg不编译 config.module .rule('svg') .exclude.add(path.join(__dirname, 'src/assets/svg')) .end() config.module .rule('icons')// 定义一个名叫 icons 的规则 .test(/\.svg$/)// 设置 icons 的匹配正则 .include.add(path.join(__dirname,'src/assets/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则 .end() .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置 .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader .options({// 该 svg-sprite-loader 的配置 symbolId:'icon-[name]' }) .end() }, devServer:{ client:{ overlay: false }, proxy:{ '/hie':{ target:'http://192.168.17.77:7003', changeOrigin: true, } } }, } 可能是哪里配错了，但我看不出问题，希望有人能指出 ps：之前看到有帖子说vue2该配置项名为proxyTable，还有devServer应为dev，这两个我都试过了，前者提示没有该配置项 options has an unknown property 'proxyTable'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? } ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. 后者为vue.config.js的提示： Invalid options in vue.config.js: "dev" is not allowed

浏览量204

花影流年

vue使用cryptojs加密 lumen使用aes解密，但失败了,有代码，如何解决？

浏览量186

通了顺畅了

这里真的需要状态管理吗？

这里真的需要状态管理吗？慕课网上的"基于Vue 3新标准，打造后台综合解决方案" (https://link.segmentfault.com/?enc=vl64taxZQbE1N7Z2Nz%2FuRA%3D%3D.0LY7TXOiQmMf33hd%2BwqLpxhEJ%2FC%2BdTjCINFMc%2Bca0A0e%2BT9xX7GGXn89gL4w4XLd)登录一节，将登录请求和响应处理用状态管理库vuex来处理。但是我觉得这里并不设计什么状态管理，直接将这部分操作封装到一个函数中即可，使用vuex我不太理解？ import { login } from '@/api/sys' import md5 from 'md5' export default { namespaced: true, state: () => ({}), mutations: {}, actions: { login(context, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { login({ username, password: md5(password) }) .then(data => { resolve() }) .catch(err => { reject(err) }) }) } } } 登录 import { ref } from 'vue' import { validatePassword } from './rules' import { useStore } from 'vuex' ... // 登录动作处理 const loading = ref(false) const loginFromRef = ref(null) const store = useStore() const handleLogin = () => { loginFromRef.value.validate(valid => { if (!valid) return loading.value = true store .dispatch('user/login', loginForm.value) .then(() => { loading.value = false // TODO: 登录后操作 }) .catch(err => { console.log(err) loading.value = false }) }) }

浏览量136

万码用户

vuex怎样简化跨组件触发事件

组件A： this.$store.commt('change') 组件B: methods:{ methodA(){ ... } }, computed:{ eventChange(){ return this.$store.state.eventChange } }, watch:{ eventChange(val){ this.methodA() } } store: state:{ eventChange:false }, mutations:{ change(state){ state.eventChange = !state.eventChange } } 感觉绕了十万八千里，有没有什么简单的办法在组件A中直接触发B组件中的事件，不考虑eventBus

浏览量163

万码用户

vuex 如何监听页面状态的变化？头像 fengjutian 50519114164 发布于

1.在A页面修改了Vuex中状态。需要在B页面实时进行监听。 2.如何实现？

浏览量161

万码用户

vuex中存储的数据在页面刷新之后都是失去，我想让vuex中的数据在刷新之后不会丢失怎么办。

1.vuex中存储的数据在刷新页面(F5)之后会丢失全部的数据 2.我想刷新页面之后不丢失。同时我还不想存储在window中的session和local中各位大牛vuex中有没有相应的数据存储方法或者设置可以做到这样的效果

浏览量147

无敌铃铃后

封装axios时，创建axios时用到vuex，getter is not defined?

我想根据vuex里的iswx的值来动态改变baseURL，但是显示getters is not defined.请问是什么原因"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241214/84c6627b8d065f6806f4a74375b16a5e.png) import axios from 'axios' import store from '@/store' import router from '@/router' // create an axios instance const service = axios.create({ //baseURL: process.env.VUE_APP_BASE_API, baseURL: store.getters.iswx ? process.env.VUE_APP_BASE_API1 : process.env.VUE_APP_BASE_API2, timeout: 20000 // request timeout })

浏览量17

皮皮踢

uniapp 微信小程序 onLaunch触发vuex 请求http报错600009？

Uniapp开发微信小程序：在onLaunch 调用 this.$store.commit('setToken', token)，执行vuex的actions请求http（用的是uv-ui封装的http），会报错，有大佬指点一下吗？ https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241107/220c81091b9f5ebfd84acc6b7d2a23c7.pnghttps://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241107/f9a5e1c6e7b4c6e994f086d2b304e399.pnghttps://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241107/e82da9d04ea44f6dba8f0e5ccbc2b2a8.png

浏览量30

vue 登录鉴权的问题，错误返回的问题？

Vuex 实现不同页面间数据同步？

Vue项目devServer proxy配置不生效的排查方法？

vue使用cryptojs加密 lumen使用aes解密，但失败了,有代码，如何解决？

这里真的需要状态管理吗？

vuex怎样简化跨组件触发事件

vuex 如何监听页面状态的变化？ 头像 fengjutian 50519114164 发布于

vuex中存储的数据在页面刷新之后都是失去，我想让vuex中的数据在刷新之后不会丢失怎么办。

封装axios时，创建axios时用到vuex，getter is not defined?

uniapp 微信小程序 onLaunch触发vuex 请求http报错600009？

vuex 如何监听页面状态的变化？头像 fengjutian 50519114164 发布于