我正在 Build 我的第一个SPA,我正面临一些问题 . 这是它的设计方式:
-
Laravel和Laravel Views处理登录和注册相关页面 .
-
SPA从用户登录页面开始 .
-
我的app.js定义了一个默认的VueJS应用程序,我在其中使用
mounted()
方法设置登录用户的状态(VUEX) . 理想情况下,它所做的只是通过对Laravel后端的axios调用获取用户详细信息并填充VUEX状态 . -
我在路线定义中使用
beforeEnter()
方法,以确保只有经过授权的人才能导航到路线 .
这是我面临问题的地方 . 当用户登录时,似乎路由器在设置vuex之前执行 . 假设我有一个url / dashboard和/ user / 1 . 当我尝试转到user / 1时,如果它是在我加载应用程序之后它完美地工作 . 但是,如果我在用户/ 1时刷新网页,则路由器 beforeEnter
无法找到用户的vuex状态,因此会将用户重定向到仪表板 . 这是因为当路由器运行 beforeEnter
时,如果它是一个新的页面加载,它还没有设置't have access to the user Vuex state or it has access, but the value isn't .
因此,我最大的问题是我无法直接链接到路由页面,因为它总是落在仪表板中,然后用户必须前往路由才能工作 . 我该如何处理这种情况?
3 回答
我使用$ root作为总线并转向VueX作为最后的手段,这里有一些代码我已经从我正在处理的插件中删除了,我已经稍微适应了你,只需要你的代码..,应该让你去
此配置支持VUE Cli .
不要担心会话过期,拦截器会观察Laravel的401响应会提示用户重新进行身份验证 .
抛弃bootstrap.js中的axios配置并将其替换为此设置并配置Access-Control-Allow-Origin,通配符将用于本地开发 .
对于其余的...
在main.js中
在Auth / LoginController.php中添加方法
创建app / Http / Middleware / AfterMiddleware.php只有当它发生变化而不是每次请求时,它才会传回一个新的CSRF令牌 . axios拦截器将在检测到时捕获新令牌 .
您可以使用此设置有效地使用Vue登录表单替换静态登录表单 .
以下是路由器设置的样子:
与仪表板中一样,您应确保在输入任何路径之前获取用户的数据 . 为此,您可以使用全局导航防护 . 这可以在您的应用程序中的任何位置工作,并且可以替换为仪表板路径中的当前逻辑,其中显式地获取用户数据 .
假设你有一个函数
getUserData
,它通过API获取数据并有两个回调,一个用于成功,一个用于错误:以下是全球导航卫士的官方文件:https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards
这就是我最终做的事情 . 我定义了一个初始化Vue的函数 .
在app.js的最后,我使用Axios通过Ajax检索当前用户 . 在promise的
then
方法中,我将store
设置为我在promise中收到的用户详细信息,然后调用我为上面的Vue初始化定义的函数 . 这样,当初始化vue时,商店用户已经拥有数据 .代码更改非常小,我不必更改现有的axios实现 .
这是我的新实现: