mirror of
https://github.com/kevin-DL/wails-vue-template.git
synced 2026-01-11 09:54:33 +00:00
Added basic auth and route protection
This commit is contained in:
33
auth.go
Normal file
33
auth.go
Normal file
@@ -0,0 +1,33 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"context"
|
||||
)
|
||||
|
||||
// App struct
|
||||
type Auth struct {
|
||||
ctx context.Context
|
||||
}
|
||||
|
||||
// NewApp creates a new App application struct
|
||||
func NewAuth() *Auth {
|
||||
return &Auth{}
|
||||
}
|
||||
|
||||
// startup is called when the app starts. The context is saved
|
||||
// so we can call the runtime methods
|
||||
func (a *Auth) startup(ctx context.Context) {
|
||||
a.ctx = ctx
|
||||
}
|
||||
|
||||
func (a *Auth) Login() error {
|
||||
return nil
|
||||
}
|
||||
|
||||
func (a *Auth) Register() error {
|
||||
return nil
|
||||
}
|
||||
|
||||
func (a *Auth) IsLoggedIn() bool {
|
||||
return false
|
||||
}
|
||||
@@ -1,8 +1,39 @@
|
||||
<script setup>
|
||||
import { RouterView } from 'vue-router'
|
||||
import { RouterView, RouterLink } from 'vue-router'
|
||||
import { IsLoggedIn } from '../wailsjs/go/main/Auth'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
|
||||
const loggedIn = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
IsLoggedIn().then(val => {
|
||||
loggedIn.value = val
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li v-if="loggedIn">
|
||||
Logged In
|
||||
</li>
|
||||
<li v-else>
|
||||
<RouterLink to="/"> Home </RouterLink>
|
||||
<RouterLink to="/login"> Log in </RouterLink>
|
||||
<RouterLink to="/protected"> Protected </RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<aside>
|
||||
<RouterLink to="/"> Home </RouterLink>
|
||||
<RouterLink to="/login"> Log in </RouterLink>
|
||||
<RouterLink to="/protected"> Protected </RouterLink>
|
||||
</aside>
|
||||
<main>
|
||||
<RouterView />
|
||||
</main>
|
||||
|
||||
@@ -1,22 +1,62 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createWebHashHistory, createRouter } from 'vue-router'
|
||||
import { IsLoggedIn } from '../wailsjs/go/main/Auth'
|
||||
import App from './App.vue'
|
||||
import './style.css';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('./pages/Index.vue')
|
||||
}
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('./pages/Index.vue'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/protected',
|
||||
name: 'protected',
|
||||
component: () => import("./pages/Protected.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import("./pages/Login.vue"),
|
||||
meta: {
|
||||
requiresAuth: "guest",
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
|
||||
router.beforeEach(async (to, from) => {
|
||||
// instead of having to check every route record with
|
||||
// to.matched.some(record => record.meta.requiresAuth)
|
||||
const loggedIn = await IsLoggedIn()
|
||||
if (to.meta.requiresAuth === true && !loggedIn) {
|
||||
return {
|
||||
path: '/login',
|
||||
query: { redirect: to.fullPath },
|
||||
}
|
||||
} else {
|
||||
if (to.meta.requiresAuth === 'guest' && loggedIn) {
|
||||
return {
|
||||
path: '/protected',
|
||||
query: { redirect: to.fullPath },
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
createApp(App)
|
||||
.use(router)
|
||||
.mount('#app')
|
||||
.use(router)
|
||||
.mount('#app')
|
||||
|
||||
5
frontend/src/pages/Login.vue
Normal file
5
frontend/src/pages/Login.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<script setup>
|
||||
</script>
|
||||
<template>
|
||||
<h1> Login </h1>
|
||||
</template>
|
||||
5
frontend/src/pages/Protected.vue
Normal file
5
frontend/src/pages/Protected.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<script setup>
|
||||
</script>
|
||||
<template>
|
||||
<h1> Potected </h1>
|
||||
</template>
|
||||
8
frontend/wailsjs/go/main/Auth.d.ts
vendored
Executable file
8
frontend/wailsjs/go/main/Auth.d.ts
vendored
Executable file
@@ -0,0 +1,8 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
export function IsLoggedIn():Promise<boolean>;
|
||||
|
||||
export function Login():Promise<void>;
|
||||
|
||||
export function Register():Promise<void>;
|
||||
15
frontend/wailsjs/go/main/Auth.js
Executable file
15
frontend/wailsjs/go/main/Auth.js
Executable file
@@ -0,0 +1,15 @@
|
||||
// @ts-check
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
export function IsLoggedIn() {
|
||||
return window['go']['main']['Auth']['IsLoggedIn']();
|
||||
}
|
||||
|
||||
export function Login() {
|
||||
return window['go']['main']['Auth']['Login']();
|
||||
}
|
||||
|
||||
export function Register() {
|
||||
return window['go']['main']['Auth']['Register']();
|
||||
}
|
||||
8
main.go
8
main.go
@@ -1,6 +1,7 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"context"
|
||||
"embed"
|
||||
|
||||
"github.com/wailsapp/wails/v2"
|
||||
@@ -14,6 +15,7 @@ var assets embed.FS
|
||||
func main() {
|
||||
// Create an instance of the app structure
|
||||
app := NewApp()
|
||||
auth := NewAuth()
|
||||
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
@@ -24,9 +26,13 @@ func main() {
|
||||
Assets: assets,
|
||||
},
|
||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
|
||||
OnStartup: app.startup,
|
||||
OnStartup: func(ctx context.Context) {
|
||||
app.startup(ctx)
|
||||
auth.startup(ctx)
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
auth,
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user