Vue实现用户没有登陆时,访问后自动跳转登录页面的实现思路

目录

• 设计思路
•  代码实现

设计思路

• 定义路由的时候配置属性，这里使用needLogin标记访问页面是否需要登录
• 设置路由守卫，每个页面在跳转之前都要经过验证，校验用户信息是否存在，不存在跳转到登录页
• 用户登录后将用户信息存储在localStorage
• 退出登录后，将用户信息清空

 代码实现

1、router文件夹的index.js文件中

• 在router中每个地址在meta属性中配置needLogin熟悉，判断访问页面是否需要登录
• 404页面放在最后，匹配所有链接，实现输入不存在的地址时自动跳转404页面

import Vue from 'vue'
import Router from 'vue-router'
import LoginCard from "../components/LoginCard";
import Home from "../components/Home";
import ErrorPage from "../components/ErrorPage";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'LoginCard',
      component: LoginCard,
      meta: {
        needLogin: false
      }
    },
    {
      path: '/loginCard',
      name: 'LoginCard',
      component: LoginCard,
      meta: {
        needLogin: false
      }
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      meta: {
        needLogin: true
      }
    }, {
      path: '/*',
      name: 'ErrorPage',
      component: ErrorPage,
      meta:{
        needLogin: false
      }

    }
  ]
})

2、在main.js中定义一个路由前置守卫，每次跳转页面进行判断，没有登陆自动挑战登陆界面

import Vue from 'vue'
import App from './App'
import router from './router'
import VueRouter from "vue-router";
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import * as auth from './utils/auth'
import store from './store'
import Vuex from "vuex";

Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueRouter);
Vue.use(Vuex)


//这个方法需要放在new Vue之前，不然按F5刷新页面不会调用这个方法
router.beforeEach(function (to, from, next) {
  console.log('是否需要登录才能访问')
  if (to.meta.needLogin) {
    if (auth.getAdminInfo()) {
      console.log(auth.getAdminInfo())
      console.log('有cookie信息')
      next();
    }else {
      console.log('无cookie信息')

      next({
        path:'/loginCard'
      });
    }
  }else{
    next();
  }
})

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

3、编写一个存储数据的工具，使用cookie存储用户登录后的信息

import Cookies from 'js-cookie'
const adminInfo = "adminInfo"

//获取用户信息
export function getAdminInfo() {
  const admin = Cookies.get(adminInfo)
  if(admin){
    return JSON.parse(admin)
  }
  return ''
}
//存储用户信息
export function setAdminInfo(admin) {
  return Cookies.set(adminInfo, JSON.stringify(admin))
}
//移除用户信息
export function removeAdminInfo() {

  return Cookies.remove(adminInfo)
}

4、写一个登录页面，用户登录后就将数据存储在cookie中

5、编写一个退出页面，用户退出以后，将用户信息从cookie中去除，跳转到登陆页面

基本目录结构是这样的

到此这篇关于Vue学习：实现用户没有登陆时，访问后自动跳转登录页面的文章就介绍到这了,更多相关Vue自动跳转登录页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！