vue 利用路由守衛判斷是否登入
阿新 • • 發佈:2018-12-29
1.首先你要研究通 Router 物件,
2.當用戶想直接訪問首頁的時候,使用路由守衛判斷sessionStorage裡是否有物件,沒有全都幹到login中
3.登入成功後,登出操作,清除sessionStorage物件,跳轉login
4.我沒有寫後臺, 通過匹配vuex中使用者物件,來判斷. 如果成功後把物件存到sessionStorage中,
import Vue from 'vue' import Router from 'vue-router' import Demo from '@/components/Demo' import Login from '@/components/Login' Vue.use(Router) const router= new Router({ routes: [ { path: '/login', name: 'Login', component: Login }, { path: '/', name: 'Demo', component: Demo }, ] }) router.beforeEach((to,form,next)=>{ if(to.path=='/login'){ sessionStorage.removeItem("user"); } let user = JSON.parse(sessionStorage.getItem("user")); if(!user&&to.path!='/login'){ next({path:'/login'}) }else{ next(); } }) export default router;
2.登入頁面
<template> <div> <h1>登入</h1> <template> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="username" label="使用者名稱" :rules="[ { required: true, message: '請輸入使用者名稱', trigger: 'blur' }, ]" > <el-input v-model="dynamicValidateForm.username"></el-input> </el-form-item> <el-form-item prop="password" label="密碼" :rules="[ { required: true, message: '請輸入密碼', trigger: 'blur' }, ]" > <el-input v-model="dynamicValidateForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('dynamicValidateForm')">登入</el-button> <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> </el-form-item> </el-form> </template> </div> </template> <script> import Vue from 'vue' import { Form, Button,Input } from 'element-ui'; import { mapState,mapGetters,mapMutations } from 'vuex' Vue.use(Button); export default { data() { return { dynamicValidateForm: { username:"", password:'', } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { let flag = this.verification(); if(flag){ sessionStorage.setItem('user',JSON.stringify(this.dynamicValidateForm.username)); this.$router.push({ path: '/' }) } } else { return false; } }); }, //驗證賬號和密碼 verification(){ if(this.obj.username=this.dynamicValidateForm.username&&this.obj.password==this.dynamicValidateForm.password){ return true; }else{ return false; } }, resetForm(formName) { this.$refs[formName].resetFields(); sessionStorage.setItem('user',JSON.stringify(this.dynamicValidateForm.username)); this.$router.push({ path: '/login' }) }, }, computed:{ ...mapState({ obj: state => state.obj, }) } } </script> <style> </style>
3.首頁(登出)
<template> <div> <img src="./../assets/logo.png"> <span>{{this.count}}</span> <el-button @click="increment">加1</el-button> <el-button @click="reduce">減1</el-button> <el-button @click="cancellation">登出</el-button> </div> </template> <script > import Vue from 'vue' import { mapState,mapGetters,mapMutations } from 'vuex' import { Button, Select } from 'element-ui'; Vue.use(Button); export default { name: 'Demo', data () { return { } }, methods:{ ...mapMutations([ 'increment','decrement' ]), change(){ this.increment(); }, reduce(){ this.decrement(); }, cancellation(){ this.$router.push({ path: '/login' }) } }, computed:{ ...mapState({ count: state => state.count, }) } } </script> <style> </style>