vue 利用路由守卫判断是否登录
1.首先你要研究通 Router 对象,2.当用户想直接访问首页的时候,使用路由守卫判断sessionStorage里是否有对象,没有全都干到login中3.登录成功后,注销操作,清除sessionStorage对象,跳转login4.我没有写后台, 通过匹配vuex中用户对象,来判断. 如果成功后把对象存到sessionStorage中,import Vue from 'vue...
·
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>
更多推荐
已为社区贡献2条内容
所有评论(0)