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: '<App/>'

})

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中

 <template>

  <div>

    <el-form ref="loginForm" :rules="formRules" :model="loginUser" label-width="80px" class="login-box">

      <h3 style="margin-bottom: 50px">欢迎登录</h3>

      <el-form-item label="用户名" prop="username">

        <el-input prefix-icon="el-icon-user" type="text" v-model="loginUser.username"  placeholder="请输入用户名" :maxlength="50" clearable></el-input>

      </el-form-item>

      <el-form-item label="密码" prop="password">

        <el-input prefix-icon="el-icon-lock" type="password" v-model="loginUser.password"  placeholder="请输入密码" :maxlength="50" clearable>

        </el-input>

      </el-form-item>

      <el-form-item>

        <el-button type="primary" @click="onSubmit">登陆</el-button>

        <el-button icon="" @click="resetForm">重置</el-button>

      </el-form-item>

    </el-form>

  </div>

</template>

<script>

import * as auth from '../utils/auth'

export default {

  name: 'LoginCard',

  data() {

    return {

      loginUser: {

        username: '',

        password: '',

      },

      formRules: {

        //制定表单输入的规则

        username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],

        password: [{required: true, message: '密码不能为空', trigger: 'blur'}]

      }

    }

  },

  methods: {

    onSubmit() {

      //判断表单是否符合规则

      this.$refs['loginForm'].validate((valid) => {

          if (valid) {

            if (this.loginUser.username !== '123456' || this.loginUser.password !== '123456'){

              this.$message({

                message:'账号或密码错误',

                type: 'error',

              });

              return;

            }

            auth.setAdminInfo(this.loginUser);

            this.$router.push({path:'/home'});

          }

        }

      )

    },

    resetForm(){

      this.$refs['loginForm'].resetFields();

    },

  }

}

</script>

<style scoped>

.login-box {

  border: 1px solid #DCDFE6;

  width: 400px;

  margin: 180px auto;

  padding: 35px 35px 15px 35px;

  border-radius: 5px;

}

</style>

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

 <template>

  <div>

    <h1>主页面</h1>

    <el-button @click="logout">退出登录</el-button>

  </div>

</template>

<script>

import * as auth from '../utils/auth'

export default {

  name : 'Home',

  data() {

    return {

    };

  },

  methods: {

    logout(){

      auth.removeAdminInfo();

      this.$router.push({path:'/loginCard'});

    }

  },

  mounted() {

  }

}

</script>

基本目录结构是这样的

巴特西

Vue学习：实现用户没有登陆时，访问后自动跳转登录页面

设计思路

代码实现

最新文章

热门文章