如何在Rails控制器中访问Vue路由并将未登录用户重定向至登录页

解决方案 #

你要在Rails控制器中跳转Vue定义的前端路由，直接重定向到路由对应的绝对路径即可，浏览器接收到重定向响应后加载对应路径，会自动由Vue Router接管渲染，不需要额外的适配方法。

1. 修正Rails控制器逻辑 #

你当前代码存在两处冲突问题：

• 重复配置了登录校验前置钩子，require_user返回401的逻辑和重定向需求冲突
• redirect_to 'sign-in'使用相对路径，会自动拼接当前请求的路径前缀，无法正确匹配根路径下的/sign-in前端路由

修正后的代码：

class MyAccountController < ApplicationController
  before_action :authenticate_user

  private

  def authenticate_user
    return super if user_signed_in?
    # 重定向到根路径下的前端登录路由，同域部署直接写路径即可
    redirect_to '/sign-in', allow_other_host: false
  end   
end

如果是前后端分离跨域部署，直接写完整的前端登录地址即可：
redirect_to 'https://你的前端部署域名/sign-in'

2. 修正Vue路由配置 #

你当前/sign-in路由配置了meta: { requiresAuth: true }，说明你前端有路由守卫校验登录状态，登录页本身不需要登录即可访问，这个配置会导致前端访问登录页时被再次拦截跳转，修正为：

const SessionsVue = () => import('views/sessions/new.vue')

const routes = [
  // 登录页无需鉴权，移除requiresAuth配置
  { path: '/sign-in', component: SessionsVue },
  // 其他需要登录才能访问的页面保留requiresAuth配置即可
  // { path: '/my-account', component: MyAccountVue, meta: { requiresAuth: true } }
]

内容的提问来源于stack exchange，提问作者user12763413