main.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <script>
  2. const { jwt } = require('./security')
  3. import VueRouter from 'vue-router'
  4. import Home from './home.vue'
  5. import Signup from './signup.vue'
  6. import Signin from './signin.vue'
  7. const router = new VueRouter({
  8. routes: [
  9. { path: '', component: Home },
  10. { path: '/signup', component: Signup },
  11. { path: '/signin', component: Signin }
  12. ]
  13. })
  14. router.beforeEach((to, from, next) => {
  15. console.log(to, from)
  16. next()
  17. })
  18. export default {
  19. router,
  20. data() {
  21. return {
  22. drawer: null,
  23. jwt
  24. }
  25. },
  26. methods: {
  27. signout() {
  28. jwt.token = null
  29. this.$router.push('/')
  30. }
  31. }
  32. }
  33. </script>
  34. <template>
  35. <v-app dark>
  36. <v-navigation-drawer clipped fixed app v-model="drawer">
  37. <!-- <v-toolbar flat>
  38. <v-toolbar-side-icon v-on:click="drawer = !drawer" />
  39. <v-toolbar-title>RSS Archive</v-toolbar-title>
  40. </v-toolbar> -->
  41. <v-list>
  42. <v-list-tile v-if="!jwt.token" to="/signin">
  43. <v-list-tile-action>
  44. <v-icon>account_circle</v-icon>
  45. </v-list-tile-action>
  46. <v-list-tile-title>Sign in</v-list-tile-title>
  47. </v-list-tile>
  48. <v-list-tile v-if="!jwt.token" to="/signup">
  49. <v-list-tile-action>
  50. <v-icon>person_add</v-icon>
  51. </v-list-tile-action>
  52. <v-list-tile-title>Sign up</v-list-tile-title>
  53. </v-list-tile>
  54. <v-list-tile v-if="jwt.token" @click="signout">
  55. <v-list-tile-action>
  56. <v-icon>account_circle</v-icon>
  57. </v-list-tile-action>
  58. <v-list-tile-title>Sign out</v-list-tile-title>
  59. </v-list-tile>
  60. <v-list-tile to="/">
  61. <v-list-tile-action>
  62. <v-icon>home</v-icon>
  63. </v-list-tile-action>
  64. <v-list-tile-title>Home</v-list-tile-title>
  65. </v-list-tile>
  66. </v-list>
  67. <v-divider></v-divider>
  68. </v-navigation-drawer>
  69. <v-toolbar app fixed clipped-left color="primary">
  70. <v-toolbar-side-icon v-on:click="drawer = !drawer" />
  71. <v-toolbar-title>RSS Archive</v-toolbar-title>
  72. </v-toolbar>
  73. <v-content>
  74. <v-container>
  75. <router-view />
  76. </v-container>
  77. </v-content>
  78. </v-app>
  79. </template>
  80. <style scoped>
  81. .hero {
  82. text-align: center;
  83. }
  84. </style>