blogcacanid’s gists

blogcacanid / register.component.css

Created November 9, 2020 21:55

register.component.css Authentication JWT Angular 9 Lumen 7

blogcacanid / register.component.html

Created November 9, 2020 21:54

register.component.html Authentication JWT Angular 9 Lumen 7

	<div class="col-md-12">
	<div class="card card-container">
	<img
	id="profile-img"
	src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
	class="profile-img-card"
	/>
	<form
	*ngIf="!isSuccessful"
	name="form"

blogcacanid / register.component.ts

Created November 9, 2020 21:54

register.component.ts Authentication JWT Angular 9 Lumen 7

	import { Component, OnInit } from '@angular/core';
	import { AuthService } from '../_services/auth.service';

	@Component({
	selector: 'app-register',
	templateUrl: './register.component.html',
	styleUrls: ['./register.component.css']
	})
	export class RegisterComponent implements OnInit {

blogcacanid / index.html

Created November 9, 2020 21:53

index.html Authentication JWT Angular 9 Lumen 7

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Ang9AuthJwtLumen7</title>
	<base href="/">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link
	rel="stylesheet"

blogcacanid / auth.interceptor.ts

Created November 9, 2020 21:52

auth.interceptor.ts Authentication JWT Angular 9 Lumen 7

	import { HTTP_INTERCEPTORS } from '@angular/common/http';
	import { Injectable } from '@angular/core';
	import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';

	import { TokenStorageService } from '../_services/token-storage.service';

	// for Lumen 7 back-end
	const TOKEN_HEADER_KEY = 'Authorization';
	// for Node.js Express back-end
	// const TOKEN_HEADER_KEY = 'x-access-token';

blogcacanid / user.service.ts

Created November 9, 2020 21:52

user.service.ts Authentication JWT Angular 9 Lumen 7

	import { Injectable } from '@angular/core';
	import { HttpClient } from '@angular/common/http';
	import { Observable } from 'rxjs';

	// for Lumen 7 back-end
	const API_URL = 'http://localhost:8000/api/test/';
	// for Node.js back-end
	// const API_URL = 'http://localhost:9090/api/test/';

	@Injectable({

blogcacanid / token-storage.service.ts

Created November 9, 2020 21:51

token-storage.service.ts Authentication JWT Angular 9 Lumen 7

	import { Injectable } from '@angular/core';

	const TOKEN_KEY = 'auth-token';
	const USER_KEY = 'auth-user';

	@Injectable({
	providedIn: 'root'
	})
	export class TokenStorageService {

blogcacanid / auth.service.ts

Created November 9, 2020 21:43

auth.service.ts Authentication JWT Angular 9 Lumen 7

	import { Injectable } from '@angular/core';
	import { HttpClient, HttpHeaders } from '@angular/common/http';
	import { Observable } from 'rxjs';

	// for Lumen 7 back-end
	const AUTH_API = 'http://localhost:8000/api/auth/';
	// for Node.js back-end
	// const AUTH_API = 'http://localhost:9090/api/auth/';

	const httpOptions = {

blogcacanid / App.vue

Created November 9, 2020 06:32

App.vue Authentication JWT Vue Lumen 7

	<template>
	<div id="app">
	<nav class="navbar navbar-expand navbar-dark bg-dark">
	<div class="container">
	<a href class="navbar-brand" @click.prevent>
	<img alt="Vue logo" src="./assets/logo.png" width="32">
	VUE LOGIN JWT
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>

blogcacanid / router.js

Created November 9, 2020 06:31

router.js Authentication JWT Vue Lumen 7

	import Vue from 'vue';
	import Router from 'vue-router';
	import Home from './views/Home.vue';
	import Login from './views/Login.vue';
	import Register from './views/Register.vue';

	Vue.use(Router);

	export const router = new Router({
	mode: 'history',

Rony Chandra Kudus blogcacanid