├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── Home.vue
    │   ├── Login.vue
    │   ├── Register.vue
    │   └── Posts.vue
    ├── store
    │   ├── index.js
    │   └── modules
    │   │   └── auth.js
    ├── App.vue
    ├── main.js
    ├── components
    │   └── NavBar.vue
    └── router
    │   └── index.js
├── babel.config.js
├── .gitignore
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gabbyprecious/vue-blog/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gabbyprecious/vue-blog/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <p>Heyyyyyy welcome to our blog, check out our posts</p>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "Home",
10 |   components: {},
11 | };
12 | </script>
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vuex from "vuex";
 2 | import Vue from "vue";
 3 | import createPersistedState from "vuex-persistedstate";
 4 | import auth from "./modules/auth";
 5 | 
 6 | // Load Vuex
 7 | Vue.use(Vuex);
 8 | 
 9 | // Create store
10 | export default new Vuex.Store({
11 |   modules: {
12 |     auth,
13 |   },
14 |   plugins: [createPersistedState()],
15 | });
16 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <NavBar />
 4 |     <router-view />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import NavBar from "@/components/NavBar.vue";
11 | 
12 | export default {
13 |   components: {
14 |     NavBar,
15 |   },
16 | };
17 | </script>
18 | 
19 | <style>
20 | #app {
21 |   font-family: Avenir, Helvetica, Arial, sans-serif;
22 |   -webkit-font-smoothing: antialiased;
23 |   -moz-osx-font-smoothing: grayscale;
24 |   text-align: center;
25 |   color: #2c3e50;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # auth-project
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 
26 | ### Description on Blog Post
27 | See [Smashing Magazine](https://www.smashingmagazine.com/2020/10/authentication-in-vue-js/)
28 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import axios from "axios";
 6 | 
 7 | axios.defaults.withCredentials = true;
 8 | axios.defaults.baseURL = "https://gabbyblog-97f6eaccfce4.herokuapp.com/";
 9 | 
10 | axios.interceptors.response.use(undefined, function(error) {
11 |   if (error) {
12 |     const originalRequest = error.config;
13 |     if (error.response.status === 401 && !originalRequest._retry) {
14 |       originalRequest._retry = true;
15 |       store.dispatch("LogOut");
16 |       return router.push("/login");
17 |     }
18 |   }
19 | });
20 | 
21 | Vue.config.productionTip = false;
22 | 
23 | new Vue({
24 |   store,
25 |   router,
26 |   render: (h) => h(App),
27 | }).$mount("#app");
28 | 


--------------------------------------------------------------------------------
/src/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="nav">
 3 |     <router-link to="/">Home</router-link> |
 4 |     <router-link to="/posts">Posts</router-link> |
 5 |     <span v-if="isLoggedIn">
 6 |       <a @click="logout">Logout</a>
 7 |     </span>
 8 |     <span v-else>
 9 |       <router-link to="/register">Register</router-link> |
10 |       <router-link to="/login">Login</router-link>
11 |     </span>
12 |   </div>
13 | </template>
14 | <script>
15 | export default {
16 |   name: "NavBar",
17 |   computed: {
18 |     isLoggedIn: function() {
19 |       return this.$store.getters.isAuthenticated;
20 |     },
21 |   },
22 |   methods: {
23 |     async logout() {
24 |       await this.$store.dispatch("LogOut");
25 |       this.$router.push("/login");
26 |     },
27 |   },
28 | };
29 | </script>
30 | 
31 | <style>
32 | #nav {
33 |   padding: 30px;
34 | }
35 | 
36 | #nav a {
37 |   font-weight: bold;
38 |   color: #2c3e50;
39 | }
40 | 
41 | a:hover {
42 |   cursor: pointer;
43 | }
44 | 
45 | #nav a.router-link-exact-active {
46 |   color: #42b983;
47 | }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "auth-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.20.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.11",
14 |     "vue-cookies": "^1.7.4",
15 |     "vue-router": "^3.2.0",
16 |     "vuex": "^3.5.1",
17 |     "vuex-persistedstate": "^4.0.0-beta.1"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-eslint": "~4.5.0",
22 |     "@vue/cli-plugin-router": "^4.5.6",
23 |     "@vue/cli-service": "~4.5.0",
24 |     "babel-eslint": "^10.1.0",
25 |     "eslint": "^6.7.2",
26 |     "eslint-plugin-vue": "^6.2.2",
27 |     "vue-template-compiler": "^2.6.11"
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "env": {
32 |       "node": true
33 |     },
34 |     "extends": [
35 |       "plugin:vue/essential",
36 |       "eslint:recommended"
37 |     ],
38 |     "parserOptions": {
39 |       "parser": "babel-eslint"
40 |     },
41 |     "rules": {}
42 |   },
43 |   "browserslist": [
44 |     "> 1%",
45 |     "last 2 versions",
46 |     "not dead"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/src/store/modules/auth.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | const state = {
 4 |   user: null,
 5 |   posts: null,
 6 | };
 7 | 
 8 | const getters = {
 9 |   isAuthenticated: (state) => !!state.user,
10 |   StatePosts: (state) => state.posts,
11 |   StateUser: (state) => state.user,
12 | };
13 | 
14 | const actions = {
15 |   async Register({dispatch}, form) {
16 |     await axios.post('register', form)
17 |     let UserForm = new FormData()
18 |     UserForm.append('username', form.username)
19 |     UserForm.append('password', form.password)
20 |     await dispatch('LogIn', UserForm)
21 |   },
22 | 
23 |   async LogIn({commit}, user) {
24 |     await axios.post("login", user);
25 |     await commit("setUser", user.get("username"));
26 |   },
27 | 
28 |   async CreatePost({ dispatch }, post) {
29 |     await axios.post("post", post);
30 |     return await dispatch("GetPosts");
31 |   },
32 | 
33 |   async GetPosts({ commit }) {
34 |     let response = await axios.get("posts");
35 |     commit("setPosts", response.data);
36 |   },
37 | 
38 |   async LogOut({ commit }) {
39 |     let user = null;
40 |     commit("logout", user);
41 |   },
42 | };
43 | 
44 | const mutations = {
45 |   setUser(state, username) {
46 |     state.user = username;
47 |   },
48 | 
49 |   setPosts(state, posts) {
50 |     state.posts = posts;
51 |   },
52 |   logout(state, user) {
53 |     state.user = user;
54 |   },
55 | };
56 | 
57 | export default {
58 |   state,
59 |   getters,
60 |   actions,
61 |   mutations,
62 | };
63 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import store from "../store";
 4 | import Home from "../views/Home.vue";
 5 | import Register from "../views/Register";
 6 | import Login from "../views/Login";
 7 | import Posts from "../views/Posts";
 8 | 
 9 | Vue.use(VueRouter);
10 | 
11 | const routes = [
12 |   {
13 |     path: "/",
14 |     name: "Home",
15 |     component: Home,
16 |   },
17 |   {
18 |     path: "/register",
19 |     name: "Register",
20 |     component: Register,
21 |     meta: { guest: true },
22 |   },
23 |   {
24 |     path: "/login",
25 |     name: "Login",
26 |     component: Login,
27 |     meta: { guest: true },
28 |   },
29 |   {
30 |     path: "/posts",
31 |     name: "Posts",
32 |     component: Posts,
33 |     meta: { requiresAuth: true },
34 |   },
35 | ];
36 | 
37 | const router = new VueRouter({
38 |   mode: "history",
39 |   base: process.env.BASE_URL,
40 |   routes,
41 | });
42 | 
43 | router.beforeEach((to, from, next) => {
44 |   if (to.matched.some((record) => record.meta.requiresAuth)) {
45 |     if (store.getters.isAuthenticated) {
46 |       next();
47 |       return;
48 |     }
49 |     next("/login");
50 |   } else {
51 |     next();
52 |   }
53 | });
54 | 
55 | router.beforeEach((to, from, next) => {
56 |   if (to.matched.some((record) => record.meta.guest)) {
57 |     if (store.getters.isAuthenticated) {
58 |       next("/posts");
59 |       return;
60 |     }
61 |     next();
62 |   } else {
63 |     next();
64 |   }
65 | });
66 | 
67 | export default router;
68 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="login">
 3 |     <div>
 4 |       <form @submit.prevent="submit">
 5 |         <div>
 6 |           <label for="username">Username:</label>
 7 |           <input type="text" name="username" v-model="form.username" />
 8 |         </div>
 9 |         <div>
10 |           <label for="password">Password:</label>
11 |           <input type="password" name="password" v-model="form.password" />
12 |         </div>
13 |         <button type="submit">Submit</button>
14 |       </form>
15 |       <p v-if="showError" id="error">Username or Password is incorrect</p>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import { mapActions } from "vuex";
22 | 
23 | export default {
24 |   name: "Login",
25 |   components: {},
26 |   data() {
27 |     return {
28 |       form: {
29 |         username: "",
30 |         password: "",
31 |       },
32 |       showError: false
33 |     };
34 |   },
35 |   methods: {
36 |     ...mapActions(["LogIn"]),
37 |     async submit() {
38 |       const User = new FormData();
39 |       User.append("username", this.form.username);
40 |       User.append("password", this.form.password);
41 |       try {
42 |           await this.LogIn(User);
43 |           this.$router.push("/posts");
44 |           this.showError = false
45 |       } catch (error) {
46 |         this.showError = true
47 |       }
48 |     },
49 |   },
50 | };
51 | </script>
52 | 
53 | <style scoped>
54 | * {
55 |   box-sizing: border-box;
56 | }
57 | 
58 | label {
59 |   padding: 12px 12px 12px 0;
60 |   display: inline-block;
61 | }
62 | 
63 | button[type="submit"] {
64 |   background-color: #4caf50;
65 |   color: white;
66 |   padding: 12px 20px;
67 |   cursor: pointer;
68 |   border-radius: 30px;
69 | }
70 | 
71 | button[type="submit"]:hover {
72 |   background-color: #45a049;
73 | }
74 | 
75 | input {
76 |   margin: 5px;
77 |   box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
78 |   padding: 10px;
79 |   border-radius: 30px;
80 | }
81 | #error {
82 |   color: red;
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/views/Register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="register">
 3 |     <div>
 4 |       <form @submit.prevent="submit">
 5 |         <div>
 6 |           <label for="username">Username:</label>
 7 |           <input type="text" name="username" v-model="form.username" />
 8 |         </div>
 9 |         <div>
10 |           <label for="full_name">Full Name:</label>
11 |           <input type="text" name="full_name" v-model="form.full_name" />
12 |         </div>
13 |         <div>
14 |           <label for="password">Password:</label>
15 |           <input type="password" name="password" v-model="form.password" />
16 |         </div>
17 |         <button type="submit">Submit</button>
18 |       </form>
19 |     </div>
20 |     <p v-if="showError" id="error">Username already exists</p>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import { mapActions } from "vuex";
26 | 
27 | export default {
28 |   name: "Register",
29 |   components: {},
30 |   data() {
31 |     return {
32 |       form: {
33 |         username: "",
34 |         full_name: "",
35 |         password: "",
36 |       },
37 |       showError: false
38 |     };
39 |   },
40 |   methods: {
41 |     ...mapActions(["Register"]),
42 |     async submit() {
43 |       try {
44 |         await this.Register(this.form);
45 |         this.$router.push("/posts");
46 |         this.showError = false
47 |       } catch (error) {
48 |         this.showError = true
49 |       }
50 |     },
51 |   },
52 | };
53 | </script>
54 | <style scoped>
55 | * {
56 |   box-sizing: border-box;
57 | }
58 | 
59 | label {
60 |   padding: 12px 12px 12px 0;
61 |   display: inline-block;
62 | }
63 | 
64 | button[type="submit"] {
65 |   background-color: #4caf50;
66 |   color: white;
67 |   padding: 12px 20px;
68 |   cursor: pointer;
69 |   border-radius: 30px;
70 | }
71 | 
72 | button[type="submit"]:hover {
73 |   background-color: #45a049;
74 | }
75 | 
76 | input {
77 |   margin: 5px;
78 |   box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
79 |   padding: 10px;
80 |   border-radius: 30px;
81 | }
82 | #error {
83 |   color: red;
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/views/Posts.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div v-if="User">
  4 |       <p>Hi {{ User }}</p>
  5 |     </div>
  6 |     <div>
  7 |       <form @submit.prevent="submit">
  8 |         <div>
  9 |           <label for="title">Title:</label>
 10 |           <input type="text" name="title" v-model="form.title" />
 11 |         </div>
 12 |         <div>
 13 |           <textarea
 14 |             name="write_up"
 15 |             v-model="form.write_up"
 16 |             placeholder="Write up..."
 17 |           ></textarea>
 18 |         </div>
 19 |         <button type="submit">Submit</button>
 20 |       </form>
 21 |     </div>
 22 |     <div class="posts" v-if="Posts">
 23 |       <ul>
 24 |         <li v-for="post in Posts" :key="post.id">
 25 |           <div id="post-div">
 26 |             <p>{{ post.title }}</p>
 27 |             <p>{{ post.write_up }}</p>
 28 |             <p>Written By: {{ post.author.username }}</p>
 29 |           </div>
 30 |         </li>
 31 |       </ul>
 32 |     </div>
 33 |     <div v-else>Oh no!!! We have no posts</div>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import { mapGetters, mapActions } from "vuex";
 39 | 
 40 | export default {
 41 |   name: "Posts",
 42 |   components: {},
 43 |   data() {
 44 |     return {
 45 |       form: {
 46 |         title: "",
 47 |         write_up: "",
 48 |       },
 49 |     };
 50 |   },
 51 |   created: function() {
 52 |     // a function to call getposts action
 53 |     this.GetPosts()
 54 |   },
 55 |   computed: {
 56 |     ...mapGetters({ Posts: "StatePosts", User: "StateUser" }),
 57 |   },
 58 |   methods: {
 59 |     ...mapActions(["CreatePost", "GetPosts"]),
 60 |     async submit() {
 61 |       try {
 62 |         await this.CreatePost(this.form);
 63 |       } catch (error) {
 64 |         throw "Sorry you can't make a post now!"
 65 |       }
 66 |     },
 67 |   },
 68 | };
 69 | </script>
 70 | <style scoped>
 71 | * {
 72 |   box-sizing: border-box;
 73 | }
 74 | 
 75 | label {
 76 |   padding: 12px 12px 12px 0;
 77 |   display: inline-block;
 78 | }
 79 | 
 80 | button[type="submit"] {
 81 |   background-color: #4caf50;
 82 |   color: white;
 83 |   padding: 12px 20px;
 84 |   cursor: pointer;
 85 |   border-radius: 30px;
 86 |   margin: 10px;
 87 | }
 88 | 
 89 | button[type="submit"]:hover {
 90 |   background-color: #45a049;
 91 | }
 92 | 
 93 | input {
 94 |   width: 60%;
 95 |   margin: 15px;
 96 |   border: 0;
 97 |   box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
 98 |   padding: 10px;
 99 |   border-radius: 30px;
100 | }
101 | 
102 | textarea {
103 |   width: 75%;
104 |   resize: vertical;
105 |   padding: 15px;
106 |   border-radius: 15px;
107 |   border: 0;
108 |   box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
109 |   height: 150px;
110 |   margin: 15px;
111 | }
112 | 
113 | ul {
114 |   list-style: none;
115 | }
116 | 
117 | #post-div {
118 |   border: 3px solid #000;
119 |   width: 500px;
120 |   margin: auto;
121 |   margin-bottom: 5px;
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------