vue登录

情景一：在用户刚打开网站时，自动跳转到登录页面，登录成功可以访问

router》index.js页面

import Vue from 'vue'
import Router from 'vue-router'

const Login =  () => import('@/views/login')
const Home =  () => import('@/views/home/home')

Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/', // 默认地址
      redirect: '/home'
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        title: '登录',
        keepAlive: false // 不需要被缓存
      }
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        title: '主页',
        keepAlive: true, // 需要被缓存
      }
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {x: 0, y: 0}
    }
  }
})

// 全局路由守卫

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

  const nextRoute = ['home'] // 需要登录的页面

  let isLogin = sessionStorage.getItem('userMsg');

  // 未登录状态；当路由到 nextRoute 指定页时，跳转至 login

  if (nextRoute.indexOf(to.name) >= 0) { // 检测是否登录的页面

    if (!isLogin) { // 如果未登录（本地存储无用户数据），并且要跳到登录页面

      if (from.name === 'login') {

        next('/')

        return

      }

      // 登录后，跳到到当前页面

      router.push({

        name: 'login',

        params: {redirect: to.fullPath}  

      })

    }

  }

  // 已登录状态；当路由到 login 时，跳转至 home

  if (to.name === 'login') {

    if (isLogin) {

      next('/')

      return

    }

  }

  next() // 必须使用 next ,执行效果依赖 next 方法的调用参数

})

export default router

备注：因为时判断用户是不是有userMsg，所以在登录成功(login页面)的时候将userMsg存缓存

sessionStorage.setItem('userMsg', 'admin');我这里用了sessionStorage大家可以百度和localstorage的区别，来用适合你们的缓存

 

---

情景二：用户刚打开网站时，在需要登录的页面跳转登录，不需要登录的就不用

router》index.js页面

import Vue from 'vue'
import Router from 'vue-router'

const Login =  () => import('@/views/login')
const Home =  () => import('@/views/home/home')
const Pay=  () => import('@/views/pay/Pay')

Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/', // 默认地址
      redirect: '/home'
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        title: '登录',
        keepAlive: false // 不需要被缓存
      }
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        title: '主页',
        keepAlive: true, // 需要被缓存
        needLogin: false//不需要登录
      }
    },
{
      path: '/pay',
      name: 'pay',
      component: Pay,
      meta: {
        title: '主页',
        keepAlive: true, // 需要被缓存
        needLogin: true//需要登录
      }
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {x: 0, y: 0}
    }
  }
})
// 全局路由守卫
router.beforeEach((to, from, next) => {
  let isLogin = sessionStorage.getItem('userMsg');
  if (to.meta.needLogin) {  // 判断该路由是否需要登录权限
    if (isLogin) { // 判断是否已经登录
      next()
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  }
  else {
    next()
  }
})
export default router

备注：因为时判断用户是不是有userMsg，所以在登录成功(login页面)的时候将userMsg存缓存

sessionStorage.setItem('userMsg', 'admin');我这里用了sessionStorage大家可以百度和localstorage的区别，来用适合你们的缓存

 

漂亮的分割线····

---

 

结束····