Asked Apr 13th, 2020 9:16 AM 269 0 2
  • 269 0 2
0

vuejs: làm trang admin

Share
  • 269 0 2

Chào mọi người, em có làm 1 project vuejs. Cho em hỏi làm trang admin như thế nào ? Đây là code hiện tại của em: app.vue

<template>
  <div id="app">
    <tour-header></tour-header>
    <router-view></router-view>
    <tour-footer style="margin-top: 60px"></tour-footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    //
  }),
};
</script>

route.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/destination',
    name: 'Destination',
    component: Destination
  },
  {
    path: '/tour-detail',
    name: 'TourDetail',
    component: TourDetail
  },
  {
    path: '/admin/login',
    name: 'AdminLogin',
    component: AdminLogin
  },
]

nếu như trên thì khi vào /admin/login thì sẽ có header, footer của giao diện người dùng.

Cái em đang muốn là người dùng có giao diện riêng, trang admin login thì ko có header footer, còn trang admin thì giao diện riêng. Vậy phải làm sao ạ.

2 ANSWERS


Answered Apr 13th, 2020 9:43 AM
+2

Vue router có trường meta e có thể dùng trường đó để xác định ai là user thường ai là admin, đồng thời ở file cấu hình vue-router e viết thêm đoạn check beforeEach, check trước khi vào 1 route xem ở meta người đó có thoả mãn là user hay admin ko thì mới cho vào ko thì redirect đến 1 trang mặc định nào đó.

Xem ở link này nhé e: https://www.digitalocean.com/community/tutorials/how-to-set-up-vue-js-authentication-and-route-handling-using-vue-router

(kéo xuống dưới 1 chút đoạn cấu hình Vue router e sẽ thấy nhé)

Share
Avatar Minh Trí @vmtri96
Apr 13th, 2020 9:49 AM
+1
| Reply
Share
Answered May 7th, 2020 3:51 AM
0

Bạn có thể xài thử thằng này: https://panjiachen.github.io/ Bạn đọc code của người ta rồi tham khảo cách viết của họ nhé. Rất bổ ích cho người mới tìm hiểu

Share
Viblo
Let's register a Viblo Account to get more interesting posts.