vuejs 로그인 체크 router 예제 > IT 기술백서

[code]

import Vue from ‘vue’

import Router from ‘vue-router’

import Home from ‘./views/Home.vue’

import _ from ‘lodash’

Vue.use(Router)

const router = new Router({

  mode: ‘history’,

  base: process.env.BASE_URL,

  routes: [

    {

      path: ‘/’,

      name: ‘home’,

      component: Home,

    },

    {

      path: ‘/login’,

      name: ‘login’,

      component: () =>

        import(/* webpackChunkName: “login” */ ‘./views/Login.vue’),

      meta: {

        permision: ‘guest’, // 손님만 접근가능

      },

    },

    {

      path: ‘/signup’,

      name: ‘signup’,

      component: () =>

        import(/* webpackChunkName: “signup” */ ‘./views/Signup.vue’),

      meta: {

        permision: ‘guest’, // 손님만 접근가능

      },

    },

    {

      path: ‘/myaccount’,

      name: ‘myaccount’,

      component: () =>

        import(/* webpackChunkName: “myaccount” */ ‘./views/MyAccount.vue’),

      meta: {

        permision: ‘member’, // 회원만 접근가능

      },

    },

    {

      path: ‘/forgot’,

      name: ‘forgot’,

      component: () =>

        import(/* webpackChunkName: “forgot” */ ‘./views/Forgot.vue’),

      meta: {

        permision: ‘guest’, // 손님만 접근가능

      }

    },

    {

      path: ‘/mylink’,

      name: ‘mylink’,

      component: () =>

        import(/* webpackChunkName: “mylink” */ ‘./views/MyLink.vue’),

      meta: {

        permision: ‘member’,

      }

    },

  ]

})

router.beforeEach(async (to, from, next) => {

  const permission = _.get(to, ‘meta.permision’)

  // meta.permission 이 member 이고 token 쿠키가 없으면 로그인 화면으로 보냄

  if (permision === ‘member’ && Vue.$cookies.get(‘token’) === null) {

    return next({ name: ‘login’ })

 

  // meta.permission 이 guest 이고 token 쿠키가 있으면 홈으로 보냄

  } else if (permision === ‘guest’ && Vue.$cookies.get(‘token’)) {

    return next({ name: ‘home’ })

  }

  return next()

})

export default router

[/code]

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤