小编Vin*_*yen的帖子

新的用于对具有身份验证/登录的应用程序做出反应和处理.它目前有效,但感觉被黑客攻击.现在我的isAuthenticated状态routes.js就像我一样:

class Routes extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: false,
         }
     }

在我的登录页面上,我需要知道用户何时通过身份验证才能将其重定向到home页面.允许访问和操纵此isAuthenticated状态的最佳设计模式是什么？我目前如何设置它是我有一个功能,设置内部的状态routes.js,并将状态作为道具发送,如下所示:

 setAuthenticated = (isAuthenticated) => {
        this.setState({isAuthenticated});
    }

在路由器下面......

<Route path="/" exact component={() =>
                            <div>
                                <Login
                                    isAuthenticated={this.state.isAuthenticated}
                                    setAuthenticated={this.setAuthenticated}
                            </div>
                        } />

是的,我理解这是糟糕的设计,因为这是改变道具值,这些道具值应该是不可变的.这也很糟糕,因为当我更改此值时login.js会导致多次不必要的重新渲染.我应该宣布isAuthenticated某种类型的全局变量吗？顺便说一下,我没有使用任何国家管理.

编辑:我isAuthenticated根据服务器的响应进行设置,确认正确的登录/密码组合.

全新的反应,尝试在"登录"页面上单击提交后重定向到"主页".试图按照路由器反应教程.

当我单击表单和控制台上的提交按钮记录状态和fakeAuth.isAuthenticated时,它们都返回true.但是,重定向未触发.

Login.js

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            portalId: "",
            password: "",
            redirectToReferrer: false
        }

        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleSubmit(e) {
        fakeAuth.authenticate(() => {
            this.setState({
                portalId: this.refs.portalId.value,
                password: this.refs.password.value,
                redirectToReferrer: true
            })
        })
        e.preventDefault();
    }


    render() {
        const redirectToReferrer = this.state.redirectToReferrer;
        if (redirectToReferrer === true) {
            <Redirect to="/home" />
        }

Routes.js

export const fakeAuth = {
    isAuthenticated: false,
    authenticate(cb) {
        this.isAuthenticated = true
        setTimeout(cb, 100)
    },
    signout(cb) {
        this.isAuthenticated = false
        setTimeout(cb, 100)
    } …

在我的数据库中成功创建新项目后，我发送：

res.status(201).json({message:"Successfully Registered"});

在我的有角度的前端，我能够console.log(res)并接收：

{message: "Successfully Registered"}

1）如何获取前端的状态码？res.status返回未定义。我得到的唯一响应是 JSON。

2) 确认所需 api 调用成功的最佳方法是什么？例如，当我登录并且凭据正确时，我应该检查 a200然后继续吗？或者发送自定义 JSON 消息并检查该消息是否显示“成功登录”，然后继续？

Vue 新手，从命令行处理脚手架项目。目前我有：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home

from '../components/home'



Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false

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

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  // default …

我的流程是登录页面 - >主页.

登录页面没有令牌,登录后,服务器提供令牌,用户被重定向到主页.

主页将令牌发送到服务器,令牌验证,服务器发回数据显示在前端.

问题:

HttpInterceptor在登录请求时触发Cannot read property 'token' of null.我想让拦截器以某种方式忽略登录api请求,并且只在令牌存在时才拦截后续调用.

我有一个axios获取请求，如：

axios.get(url + '?hapikey=' + copyFrom)
    .then(res => console.log(res.data));

返回类似于以下内容的响应：

{ name: 'Name',
  anObject: [
      {
          id: 1,
          nestedObject: [Object]
      }
  ]
}

如何获得的响应nestedObject以显示其字段/值对，或者是直接在中查询它的唯一方法.then？