时间戳

首页 > 解决方案 > 无法公开电子邮件中引用的公共页面以让用户在 Vue JS、Node JS 和 Mongo db 网站结构中重置密码

javascript - 无法公开电子邮件中引用的公共页面以让用户在 Vue JS、Node JS 和 Mongo db 网站结构中重置密码

问题描述

我正在开发具有用户管理功能的 Vue JS、Node 和 Mongodb 网站。我实现了“重置密码”功能：用户可以访问他的个人资料页面，按下重置密码按钮，这将触发一个节点功能，这将向他发送一封电子邮件，其中包含指向暴露给 Vue JS 组件的 URL 链接公共称为“重置密码”。

URL 具有以下格式：/ResetPassword/<token_assiged_to_user>（例如 /ResetPassword/5fa3ff9e87e0fdba7097e3bfb5e02e450ca1e1cf ）

我在本地测试了这个功能，它就像一个魅力，问题是因为我将实现移动到一个实际的测试服务器，ResetPassword 页面不再工作。

我在 index.js 路由器文件中将组件标记为“公共”，如下所示：

{
      path: '/ResetPassword/:token',
      name: 'ResetPassword',
      component: ResetPassword,
      meta: {
        public: true    
      }
}

另外，我在组件中使用了 Vue-Router 以使其暴露（这里只是组件的开头）：

<script>
  import axios from "axios";
  import Vue from 'vue'
  import VueRouter from 'vue-router'

  Vue.use(VueRouter)
  export default {
    name: 'ResetPassword',
    props: {
      token: String
    },
[...]

在单击链接时，ResetPassword 页面甚至似乎都没有呈现，它在屏幕上完全显示为空白。显示的错误“Uncaught SyntaxError: Unexpected token '<'”引用了清单文件，这是我在浏览器中查看控制台时弹出的错误： 控制台错误

路由配置目前设置为“historymode”，我还实现了一个后备方法来重定向到我们的主页。

有谁知道为什么会这样？我错过了什么吗？我知道 Vue JS 只允许创建某种“单页应用程序”，但我认为像我描述的那样公开一个公共组件是可行的。

非常感谢大家提前。

更新：下面是下面评论中请求的 main.js 文件：

import App from './App'
import BackToTop from './components/BackToTopComponent'
import BootstrapVue from 'bootstrap-vue'
import Cookies from 'vue-cookies'
import router from './router'
import Vue from 'vue'
import VueMoment from 'vue-moment'
import VueSession from 'vue-session'


import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

const moment = require('moment')
require('moment/locale/it')



Vue.use(BootstrapVue)
Vue.use(Cookies)
Vue.use(VueSession)
Vue.use(VueMoment, { moment })
Vue.filter('siNo', value => (value ? 'Si' : 'No'))


Vue.config.productionTip = false
Vue.component('BackToTop', BackToTop)

Vue.prototype.$eventBus = new Vue()
Vue.prototype.$baseUrl = '{baseUrl}';

new Vue({
    el: '#app',
    router,
    components: { App, BackToTop },
    template: '<App/>'
})

标签： javascriptnode.jsvue.jssingle-page-applicationreset-password

解决方案

我在我的项目中遇到了同样的问题！

无法访问我的站点中的链接（复制和粘贴）：Node.js - Express.js - Webpack - Vue.js - historymode

问题与我的 weback.prod.conf.js 文件有关。

尝试将此信息添加到 webpack conf 文件中的“输出”属性中：publicPath: '/'

你应该有这样的东西：

output: {
    publicPath: '/'
}

推荐阅读