Question

因此，我已经创建了一个小型应用程序（学习目的）来管理一些数据。问题是，由于所有应用程序均为single page app，浏览器不会提示在登录页面上保存登录帐户，我希望浏览器提示保存登录帐户。我已经找到了一个可能适合我的answer，但是由于我只是学习了角度6，所以我无法真正将它们联系起来。这是我的代码。

login.component.ts

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    loginForm : FormGroup;

     username = "";
     password = "";

    constructor(
            public global: GlobalService,
            public messagerService: MessagerService,
            private cookie: CookieService, //persistent
            private router: Router,
            private fb: FormBuilder
        ) {
              this.loginForm = fb.group({
                  username: ["asdsa", Validators.required],
                  password: ["adssa", Validators.required]
              });
           }

    login(){
        var helper = new JwtHelperService();
        if(this.username=='' || this.password=='')
            this.messagerService.alert({
                title: 'Error',
                icon: 'error',
                msg: 'Please fill the forms!'
            });
        else{
            this.global.login(this.username, this.password).subscribe(
                data => {
                    if(data.success=='1'){
                        this.cookie.set('jwtObj', data.jwt, new Date().getSeconds() + 7200, '/');
                        this.global.loginCheck();
                    }
                    else if(data.success == '0'){
                        this.messagerService.alert({
                            title: 'Error',
                            icon: 'error',
                            msg: data.msg
                        });
                    }
                },
            );
        }
    }

    ngOnInit() {
    }

    submitForm(value){
        console.log(value);
    }

}

login.component.html

<eui-panel [title]="'Login Panel'" [collapsible]="true" [bodyStyle]="{padding:'20px'}" style="height:320px;width:400px; margin:auto;margin-top: 25vh">
        <h2>RUC SSO LOGIN</h2>
        <form novalidate #formm [formGroup]="loginForm" (ngSubmit)="submitForm(loginForm)">
            <div style="margin-bottom:10px;">
                <label [for]="t1" align="top">Username:</label>
                <eui-textbox #t1 formControlName="username" iconCls="icon-man" placeholder="username" style="width:100%"></eui-textbox>
            </div>
            <div style="margin-bottom:10px;">
                <label [for]="t2" align="top">Password:</label>
                <eui-passwordbox #t2 formControlName="password" placeholder="password" style="width:100%"></eui-passwordbox>
            </div>
            <div>
                <eui-linkbutton (click)="submitForm(loginForm)">Login</eui-linkbutton>
            </div>
        </form>
</eui-panel>

如何触发浏览器提示？

Answer 1

好的，这是我创建的一个简单示例，已在Firefox上进行了测试 stackblitz app URL

和stackblitz editor URL

编辑：您正在使用easyui，这可能是easyui的问题，但是在提交表单并导航到其他组件时保存了密码提示。

Angular 6-触发浏览器“保存登录提示”

1 个答案: