Question

我正在尝试通过api对用户进行身份验证，但我还要确保在刷新页面时对其进行身份验证。

Guardian.Plug.sign_in似乎符合在cookie中存储用户身份验证的费用，但是当我通过我的api身份验证时，cookie不会被设置。

这确实有效：

conn
|> Guardian.Plug.sign_in(user)
|> redirect(to: root_path(conn, :index))

按此顺序使用这些管道：

  pipeline :browser do
     plug :accepts, ["html"]
     plug :fetch_session
     plug :fetch_flash
     plug :protect_from_forgery
     plug :put_secure_browser_headers
   end

   pipeline :browser_session do
     plug Guardian.Plug.VerifySession
     plug Guardian.Plug.LoadResource
   end

这不是：

conn
|> Guardian.Plug.sign_in(user)
|> render("session.json")

按此顺序使用这些管道：

  pipeline :api do
     plug :accepts, ["json"]
     plug Guardian.Plug.VerifyHeader
     plug Guardian.Plug.LoadResource
  end

  pipeline :api_session do
     plug :fetch_session
     plug :fetch_flash
     plug :put_secure_browser_headers
     plug Guardian.Plug.VerifySession
  end

由于redirect和render的行为似乎基本相同，我猜测为什么一个人工作而另一个人没有工作。

Answer 1

如果您想使用相同的身份验证来管理您的API和浏览器，那么只需使用浏览器身份验证即可。例如，如果您的端点是graphql中间件，那么您的NetworkLayer必须配置为：

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://example.com/graphql', {
    credentials: 'same-origin',
  })
);

这样，您的中继应用将使用与加载/刷新页面时相同的会话。这和旧学校的Ajax相同。

另一方面，如果您的所有前端都基于浏览器中呈现的Javascript客户端（即：React＆amp; Relay），那么您可以使用您的Phoenix控制器来呈现Javascript将执行的页面，完全依赖JWT。例如，使用 react-router ，您可以执行以下操作：

function requireAuth(nextState, replace) {
  if (!auth.loggedIn()) {
    replace({
      pathname: '/session/new',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

ReactDOM.render(
  <Router history={browserHistory}
    render={applyRouterMiddleware(useRelay)}
    environment={Relay.Store}>
    <Route path="/" component={Hello}/>
    <Route path="/session/new" component={Login}/>
    <Route path="/admin" component={AdminLayout} onEnter={requireAuth}>
      <IndexRoute component={HelloAdmin}/>
      <Route path="star-wars" component={StarWarsApp} queries={StarWarsQueries}/>
      <Route path="graphiql" component={GraphiQL} />
    </Route>
  </Router>,
  document.getElementById('react-root')
);

您的身份验证只会检查是否存在JWT（可能在localStorage中）。当您申请API时，您必须在授权标题中发送您的JWT。再一个接力示例：

const token = localStorage.getItem('token');
Relay.injectNetworkLayer(
 new Relay.DefaultNetworkLayer(GRAPHQL_URL, {
   headers: {
     Authorization: 'Bearer ' + token
   }
 })
);

然后你就可以在后端使用Guardian的东西了。请记住，在这个完整的API选项中，呈现您的登录页面的逻辑将在前端完全实现。

如何使用Guardian同时通过api和会话对用户进行身份验证？

1 个答案: