小编Ege*_*soz的帖子

Vue.js - 使帮助函数全局可用于单文件组件

我有一个Vue 2项目,有许多(50+)单文件组件.我使用Vue-Router进行路由,使用Vuex进行状态.

有一个名为helpers.js的文件,它包含许多通用函数,例如大写字符串的第一个字母.这个文件看起来像这样:

export default {
    capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
}
Run Code Online (Sandbox Code Playgroud)

我的main.js文件初始化了应用程序:

import Vue from 'vue'
import VueResource from "vue-resource"
import store from "./store"
import Router from "./router"
import App from "./components/App.vue"

Vue.use(VueResource)

const app = new Vue({
    router: Router,
    store,
    template: '<app></app>',
    components: { App }
}).$mount('#app')
Run Code Online (Sandbox Code Playgroud)

我的App.vue文件包含模板:

<template>
    <navbar></navbar>
    <div class="container">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //stuff
        }
    }
}
</script> …
Run Code Online (Sandbox Code Playgroud)

vue.js vue-router

67
推荐指数
4
解决办法
4万
查看次数

Ruby的File.open给出"没有这样的文件或目录 - text.txt(Errno :: ENOENT)"错误

我在Win 7机器上安装了Ruby 1.9.2.创建了一个简单的analyzer.rb文件.它有这一行:

File.open("text.txt").each {|line| puts line}
Run Code Online (Sandbox Code Playgroud)

当我运行代码时,它给了我这个错误:

analyzer.rb:1:in `initialize': No such file or directory - text.txt (Errno::ENOENT)
from analyzer.rb:1:in `open'
from analyzer.rb:1:in `<main>'
Exit code: 1
Run Code Online (Sandbox Code Playgroud)

我不明白.有一个text.txt在同一个目录中文件analyzer.rb的文件.我也尝试过输入文件的绝对路径C:\Ruby192\text.txt,但没有骰子.我错过了什么?

ruby

45
推荐指数
3
解决办法
10万
查看次数

使用基于HttpOnly cookie的单页应用程序进行身份验证和会话管理

几天来,我一直在为单页面应用程序寻找安全的身份验证和会话管理机制.从有关SPA和身份验证的众多教程和博客文章来看,将JWT存储在localStorage或常规cookie中似乎是最常用的方法,但将JWT用于会话并不是一个好主意因此它不是这个应用程序的选项.

要求

  • 登录应该是可以撤销的.例如,如果在用户的帐户上检测到可疑活动,则应该可以立即撤消该用户的访问权限并需要新登录.同样,密码重置等操作应撤消所有现有登录.
  • 身份验证应该通过Ajax进行.之后不应该进行浏览器重定向("硬"重定向).所有导航都应该在SPA内部进行.
  • 一切都应该跨域工作.SPA将在www.domain1.com上,服务器将在www.domain2.com上.
  • JavaScript应该无权访问服务器发送的敏感数据,例如会话ID.这是为了防止XSS攻击,其中恶意脚本可以从常规cookie,localStorage或sessionStorage中窃取令牌或会话ID.

理想的机制似乎是使用HttpOnly包含会话ID的cookie进行基于cookie的身份验证.流程将如下工作:

  1. 用户到达登录页面并提交其用户名和密码.
  2. 服务器对用户进行身份验证,并将会话ID作为HttpOnly响应cookie 发送.
  3. 然后,SPA在随后向服务器发出的XHR请求中包含此cookie.这似乎可以使用该withCredentials选项.
  4. 当向受保护的端点发出请求时,服务器会查找cookie.如果找到,它会将该会话ID与数据库表进行交叉检查,以确保会话仍然有效.
  5. 当用户注销时,会话将从数据库中删除.下次用户到达站点时,SPA会收到401/403响应(因为会话已过期),然后将用户带到登录屏幕.

因为cookie具有HttpOnly标志,JavaScript将无法读取其内容,因此只要通过HTTPS传输,它就不会受到攻击.

挑战

这是我遇到的具体问题.我的服务器配置为处理CORS请求.在对用户进行身份验证后,它会在响应中正确发送cookie:

HTTP/1.1 200 OK
server: Cowboy
date: Wed, 15 Mar 2017 22:35:46 GMT
content-length: 59
set-cookie: _myapp_key=SFMyNTYBbQAAABBn; path=/; HttpOnly
content-type: application/json; charset=utf-8
cache-control: max-age=0, private, must-revalidate
x-request-id: qi2q2rtt7mpi9u9c703tp7idmfg4qs6o
access-control-allow-origin: http://localhost:8080
access-control-expose-headers: 
access-control-allow-credentials: true
vary: Origin
Run Code Online (Sandbox Code Playgroud)

但是,浏览器不保存cookie(当我检查Chrome的本地cookie时,它不存在).因此,当以下代码运行时:

context.axios.post(LOGIN_URL, creds).then(response => {
  context.$router.push("/api/account")
}
Run Code Online (Sandbox Code Playgroud)

并创建帐户页面:

created() {
  this.axios.get(SERVER_URL + "/api/account/", {withCredentials: true}).then(response => {
    //do stuff
  } …
Run Code Online (Sandbox Code Playgroud)

cookies session-cookies reactjs vue.js vuejs2

35
推荐指数
2
解决办法
8785
查看次数

定义Vue-Router路由时访问Vuex状态

我有以下Vuex商店(main.js):

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//init store
const store = new Vuex.Store({
    state: {
        globalError: '',
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})

//init app
const app = new Vue({
    router: Router,
    store,
    template: '<app></app>',
    components: { App }
}).$mount('#app')
Run Code Online (Sandbox Code Playgroud)

我还为Vue-Router(routes.js)定义了以下路由:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//define routes
const routes = [
    { path: '/home', name: 'Home', component: Home }, …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-router vuex vuejs2

26
推荐指数
6
解决办法
3万
查看次数

即使似乎授予访问权限,Google Calendar API在OAuth期间也会出现403错误

我的应用会在用户的Google日历上发布,修改和删除活动.我正在配置OAuth以实现这一目标.这个想法是,在注册后,用户将能够进入他们的设置并同意将我的应用程序连接到他们的Google日历.然后,我将能够在数据库中存储oauth令牌和刷新令牌,并在用户日历上创建/编辑/删除事件时使用它们.

无论如何,问题是我选择了我的帐户:

选择帐户

然后我点击"允许"提供同意:

允许访问

以下是它变得奇怪的地方:在幕后,Google Calendar API会报告403 Forbidden错误.

%Ueberauth.Failure{errors: [%Ueberauth.Failure.Error{message: 403,
message_key: "OAuth2"}], provider: :google,
strategy: Ueberauth.Strategy.Google}
Run Code Online (Sandbox Code Playgroud)

我的ueberauth配置:

config :ueberauth, Ueberauth,
  providers: [
    google: {Ueberauth.Strategy.Google, [default_scope: "https://www.googleapis.com/auth/calendar", approval_prompt: "force", access_type: "offline"]}
]
Run Code Online (Sandbox Code Playgroud)

我正在提出的要求:

def callback(%{assigns: %{ueberauth_failure: fail}} = conn, _params) do
  IO.inspect fail
  conn
  |> put_flash(:error, "Failed to authenticate.")
  |> redirect(to: "/")
end

def callback(%{assigns: %{ueberauth_auth: auth}} = conn, _params) do
  IO.inspect auth
  conn
  |> put_flash(:success, "Connected to Google.")
  |> redirect(to: "/")
end
Run Code Online (Sandbox Code Playgroud)

第一个callback函数是匹配的函数(因为它失败).

但是,当我转到我的Google帐户时,我可以看到该应用已被授予权限:

授予访问权限

我提供了正确的client_id和client_secret.此外,我在Google …

google-calendar-api elixir oauth-2.0 google-oauth

10
推荐指数
1
解决办法
523
查看次数

如何创建rails 4离线webapp?

我正在尝试使用Rails 4创建一个应用程序,无需连接互联网即可使用.我听说过html5应用程序缓存和机架离线gem,这是我采用的方法.现在,它似乎在Rails 4上没有正常工作,因为/application.manifest唯一的节目:

CACHE MANIFEST
# dd1ba6bba9339ef83f9c1225c70289dd6326d3caae01b0d52b502381030dc78f

404.html
422.html
500.html

NETWORK:
*
Run Code Online (Sandbox Code Playgroud)

此外,我正在使用资源预编译,因此application.js,application.css和图像文件的名称中都有一个指纹,类似于application-e8cc2fba8275c884c.js.

html5 application-cache ruby-on-rails-4

6
推荐指数
1
解决办法
1718
查看次数

根据路线将CSS类动态插入导航栏

Vue 2和Vue-Router 2。

我正在尝试根据访问的路线来更改应用程序导航栏的颜色。这是我所拥有的:

main.js:

import App from "../components/App.vue"    

const app = new Vue({
  router: Router,
  template: '<app></app>',
  components: { App }
}).$mount('#app')
Run Code Online (Sandbox Code Playgroud)

App.vue:

<template>
    <div>
        <div class="navbar" v-on:class="{ colorNav: 'color-nav' }"></div>
        <router-view></router-view>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        colorNav: false
      }
    }
  }
</script>
Run Code Online (Sandbox Code Playgroud)

使用此设置,由于colorNavproperty为false,因此color-nav不会将类添加到导航栏。按预期工作。

现在,用户转到/somepage,它映射到SomePage.vue,后者在内部渲染router-view。我希望SomePage.vue更改colorNavApp.vue 的属性,以便将该color-nav类添加到导航栏中。

我怎么做?

vue.js vue-router vuejs2

6
推荐指数
3
解决办法
3793
查看次数

将Guardian令牌放入cookie中并从那里读取它们

我有一个使用Guardian进行 JWT身份验证的应用程序.当用户登录时,响应包含正文中的jwt.然后,前端(即SPA)将jwt存储在localStorage中,并将其附加到Authorization从那里发送的每个请求的头部.然后,服务器使用Guardian的内置验证插件验证:

pipeline :api do
  plug :accepts, ["json"]
  plug Guardian.Plug.VerifyHeader, realm: "Bearer"
end
Run Code Online (Sandbox Code Playgroud)

我想改变它,以便不是将JWT存储在localStorage(不安全)中,而是将服务器作为安全cookie(带Secure和HttpOnly设置)发送到前端.然后我希望Guardian从cookie中读取jwt,而不是从Authorization头部读取.

Guardian是否支持此功能?

这是我的SessionController create函数:

def create(conn, params) do
  case authenticate(params) do
    {:ok, user} ->
      new_conn = Guardian.Plug.api_sign_in(conn, user, :access)
      jwt = Guardian.Plug.current_token(new_conn)

      new_conn
      |> put_status(:created)
      |> render("show.json", user: user, jwt: jwt)
    :error ->
      conn
      |> put_status(:unauthorized)
      |> render("error.json")
  end
end
Run Code Online (Sandbox Code Playgroud)

elixir phoenix-framework

6
推荐指数
1
解决办法
1039
查看次数

代理 `changeOrigin` 设置似乎不起作用

我正在使用 Vue CLI 3.0.0 (rc.10) 并且并排运行两台服务器(后端服务器和 WDS)。

我按照Vue CLI 文档中的 devServer.proxy 说明向我的vue.config.js. 我还按照http-proxy-middleware 库的说明来补充选项:

module.exports = {
  lintOnSave: true,
  outputDir: '../priv/static/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        ws: true,
      },
    },
  },
}; 
Run Code Online (Sandbox Code Playgroud)

我的理解是该changeOrigin: true选项需要Origin将请求的标头动态更改为“ http://localhost:4000 ”。但是,来自我的应用程序的请求仍然从http://localhost:8080发送,并且它们会触发 CORS 阻塞:

Request URL: http://localhost:4000/api/form
Request Method: OPTIONS
Status Code: 404 Not Found
Remote Address: 127.0.0.1:4000
Host: localhost:4000
Origin: http://localhost:8080 <-- PROBLEM
Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么?

vue.js vue-cli

6
推荐指数
2
解决办法
6344
查看次数

无法在CORS请求中发送凭据

我有一个应用程序,其中Vue前端与服务器位于不同的域.具体来说,Vue位于,localhost:8080服务器位于localhost:4000.

在成功登录期间,服务器使用具有会话密钥的HttpOnly cookie进行响应.这是回复:

HTTP/1.1 200 OK
server: Cowboy
date: Wed, 15 Mar 2017 22:35:46 GMT
content-length: 59
set-cookie: _myapp_key=SFMyNTY.g3QAAAABbQAAABBndWFyZGlhbl9kZWZhdWx0bQAAAUNleUpoYkdjaU9pSklVelV4TWlJc0luUjVjQ0k2SWtwWFZDSjkuZXlKaGRXUWlPaUpWYzJWeU9qSWlMQ0psZUhBaU9qRTBPVEl5TURrek5EY3NJbWxoZENJNk1UUTRPVFl4TnpNME55d2lhWE56SWpvaVFYTndhWEpsSWl3aWFuUnBJam9pWWpreU5tVmpZek10TVRrM1lTMDBPREkyTFRrek5tSXRaRGxsTURneE5UUTNZVEpsSWl3aWNHVnRJanA3ZlN3aWMzVmlJam9pVlhObGNqb3lJaXdpZEhsd0lqb2lZV05qWlhOekluMC43THdySDUxb1hVVFR3OEhYMzBPWDJTeTd0Si05RTFFZEpQV3ZDLS1WU3YycllpZ29aTUY4NkhUMzB6Q29SWXFBajlxYXFQc0dqTzNNNFJyOHYyY1ZGZw.2k1A4HuW6VV8ACZhgHY6Szuf5gXKAe_QwMCN3doi9D4; path=/; HttpOnly
content-type: application/json; charset=utf-8
cache-control: max-age=0, private, must-revalidate
x-request-id: qi2q2rtt7mpi9u9c703tp7idmfg4qs6o
access-control-allow-origin: http://localhost:8080
access-control-expose-headers: 
access-control-allow-credentials: true
vary: Origin
Run Code Online (Sandbox Code Playgroud)

但是,使用Vue Resource进行的后续请求不会将此cookie发送回服务器,即使我包含以下credentials: true选项:

this.$http.get("http://localhost:4000/api/account/", {credentials: true}).then(response => {
  //do stuff
}, response => {
  console.log(response.body.error)
})
Run Code Online (Sandbox Code Playgroud)

我知道凭据不包括在内,因为我可以在Chrome中看到请求标头:

GET /api/account/ HTTP/1.1
Host: localhost:4000
Connection: keep-alive
Accept: application/json
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 …
Run Code Online (Sandbox Code Playgroud)

cookies cors vue.js vue-resource axios

4
推荐指数
1
解决办法
3083
查看次数

从另一个控制器创建一个ActiveRecord对象 - 我正确地做了吗?

我正在建立一个培训网站,我有两个模型,User并且Course与第三个模型相关联,CourseCompletions.第三个模型用于跟踪哪个用户已完成哪些课程,反之亦然.前两个型号有控制器,而第三个型号没有.

我实现了完成课程的功能并且工作正常(单击课程页面上的"完整课程"按钮,如果用户之前没有完成该课程,则将相应的行插入course_completion表中),但我不确定其有多强大并确保我的实施安全.这是在Course_Controller.rb中:

为简洁省略了辅助方法

def complete_course
    @course = current_course
    @user = current_user
    if !already_completed
        @course.course_completions.create(user_id: @user.id, course_id: @course.id, completion_date: Time.now)
        flash[:success] = "Congratulations! Your progress has been saved."
        redirect_to course_path
    else
        flash[:success] = "Looks like you have already completed this course before, but mad props for reviewing it!"
        redirect_to course_path
    end
end
Run Code Online (Sandbox Code Playgroud)

我的问题如下:

  1. 我应该像我正在做的那样调用create,还是构建(或创建!)更好的选择?
  2. 我应该在该功能中使用强参数吗?如果是这样,我在这种特殊情况下如何做到这一点?

先感谢您.

ruby-on-rails ruby-on-rails-4

3
推荐指数
1
解决办法
2656
查看次数

模式匹配和默认参数

我是Elixir的新手.我有这个代码:

defmodule DefaultParams do
  def func(p1, p2 \\ 2, p3 \\ 3, p4) do
    IO.inspect [p1, p2, p3, p4]
  end
end
Run Code Online (Sandbox Code Playgroud)

使用此代码,我做:

DefaultParams.func("a", "b") #=> ("a", 2, 3, "b")
Run Code Online (Sandbox Code Playgroud)

我明白为什么它的工作方式如此:因为模式匹配.Elixir尝试将提供的参数与函数定义中定义的参数进行匹配.

但是,我不明白这一点:

DefaultParams.func("a", "b", "c") #=> ("a", "b", 3, "c")
Run Code Online (Sandbox Code Playgroud)

为什么输出不是("a", 2, "b", "c")?这也适合参数中定义的模式.我在文档中寻找了一个深入的解释但却找不到任何东西.

在考虑了一段时间之后,我开始怀疑它的工作原理如下:

  1. "a"与p1匹配
  2. "b"与p2匹配
  3. "c"与p3不匹配,因为那时会出现不匹配.所以它被跳过,p3得到默认值,即3
  4. "c"与p4匹配

有人可以确认/解释吗?

编辑:修正错别字

elixir

3
推荐指数
1
解决办法
910
查看次数