vue配置用户状态管理，并使用cookie进行页面拦截
前言
? VueX是适用于在Vue项目开发时使用的状态管理工具。一般使用它进行用户信息暂存和状态的管理，其将信息保存在全局中，可以在各个界面组件中获取用户信息。此文章说明在脚手架中的部署步骤。
? cookie可以将用户信息保存在本地，方便用户在下一次进入网站的时候可以省去登录步骤直接进行登录。
目录结构
创建好简单的脚手架后在本示例中又添加了如下几个文件，其中 4 状态管理是用vuex进行状态管理的，5 路由中由界面拦截的方法。
用户状态配置
下载vuex
npm i vuex -s
创建store
在src目录下创建store文件夹；在其中创建inde.js。其用来写要存储的状态信息和相关方法。
如下示例：
- 在
state里存储用户是否登录的变量islogin， - 存储用户信息放到user对象中
- 在
mutations中定义两个方法（用来保存用户数据到state中和清空state中的数据。对应web中的登录和注销功能）
注意：由于还使用了cookie进行页面拦截所以初始化其中state值的时候是取cookie中的数据，没有则设置空或false。
import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
state:{
//存放的键值对就是所要管理的状态
islogin: Cookie.get('user')!=null? true : false,
user:{
username: Cookie.get('user')!=null? Cookie.get('user').username : '',
avater: Cookie.get('user')!=null? Cookie.get('user').avater : '',
sex: Cookie.get('user')!=null? Cookie.get('user').sex : ''
}
},
mutations:{
// 登录方法，用来向用户状态中存储用户信息
login(state, user){
console.log(user);
state.islogin = true;
state.user.username = user.username;
state.user.avater = user.avater;
state.user.sex = user.sex;
},
// 退出登录的方法，用来将用户状态给清空
logout(state){
state.islogin = false;
state.user.username = '';
state.user.avater = '';
state.user.sex = '';
}
}
})
export default store
注册路由
创建三个页面，并为其注册了对应的路由。
注意在个人中心页面添加了如下属性用来进行界面拦截
meta: {
requiresAuth: true// 标记需要登陆才能访问
}
在页面最低有拦截方法，读取cookie值，如果为空则进行重定向到项目根目录：/，由于路由配置时将根目录重定向到了登录页面，所以拦截后跳转到的是登录界面。
//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用页面
import index from './pages/index.vue';
import login from './pages/login.vue';
import my from './pages/my.vue';
//定义routes路由的集合，数组类型
const routes=[
//单个路由均为对象类型，path代表的是路径，component代表组件
{
// 首页
path:'/pages/index',
component: index,
name:'index',
},
{
// 登录页
path:"/pages/login",
component: login
},
{
// 个人中心页面
path:"/pages/my",
component: my,
name:"my",
meta: {
requiresAuth: true// 标记需要登陆才能访问
}
},
{ //根目录重定向到login页面
path:'',
redirect:"/pages/login",
}
]
//实例化VueRouter并将routes添加进去
const router=new VueRouter({
//ES6简写，等于routes：routes
routes
});
//拦截器（监测cookie中是否有登录信息，没有则重定向到根路径里）
router.beforeEach((to, from, next) => {
if (to.matched.some(route => route.meta && route.meta.requiresAuth)) {
// 根据Cookie判断是否认证成功，后端如果判断非法就将cookie设置过期
var cookie = Vue.prototype.$cookies.get('user_cookie');
if (cookie == null) { // cookie为空，没有用户信息
// 这里会设置redirect参数
// 重定向
next({
path: '/',
query: {redirect: to.fullPath}
})
} else {
next()
}
} else {
next()
}
})
//抛出这个这个实例对象方便外部读取以及访问
export default router
编写对应界面和方法
创建“登录”、“首页”和“个人中心”页面。
界面中使用了elementUI。
登录页面
由于没有连接后端，所以在点击登录按钮后判断密码为“123456”即为登录成功，并且准备了一个对象数据模拟登录成功返回的用户信息。
- 登录成功后首先将
user对象数据保存在cookie中this.$cookies.set("user_cookie", user); - 再调用store中的login方法，将user保存在状态中
this.$store.commit("login", user);。 - 随后再进行界面跳转到首页。
this.$router.push("/pages/index");
<template>
<div>
登录
<br />
<br />
<el-row>
<el-col :span="4" :offset="10">
<el-input placeholder="请输入账号" v-model="username" clearable>
</el-input>
</el-col>
</el-row>
<br />
<el-row>
<el-col :span="4" :offset="10"
><el-input
placeholder="请输入密码"
v-model="password"
show-password
clearable
></el-input
></el-col>
</el-row>
<br />
<el-row>
<el-button type="primary" @click="login">登录</el-button>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
};
},
methods: {
mounted() {
// 如果cookie中存有用户信息则可以免登录，直接进入首页
if (this.$store.state.islogin) {
this.$router.push("/pages/index");
}
},
login() {
if (this.password == "123456") {
var user = {
username: this.username,
avater: "https://z3.ax1x.com/2021/08/23/hCBFVf.jpg",
sex: "男",
};
// 存储用户信息到cookie中
this.$cookies.set("user_cookie", user);
// 存储信息到用户状态管理中
// 调用store下的某个方法,用commit,第一个参数是方法名,第二个参数是参数
this.$store.commit("login", user);
this.$message({
message: "登录成功",
type: "success",
});
// 页面跳转到首页里
this.$router.push("/pages/index");
} else {
this.$message({
message: "用户名或密码错误",
type: "error",
});
}
},
},
};
</script>
首页
首页主要用来展示通过store获取的username信息。
然后可以跳转到个人中心。
注意：
-
在没有登录的情况下也可以访问首页，但是会显示’您还未登录’。
-
在跳转个人中心的时候如果未登录则会被拦截并跳转到登录界面
<template>
<div>
<div>首页</div>
<h1 v-if="$store.state.islogin">
欢迎你！{{ this.$store.state.user.username }}
</h1>
<h1 v-else>您还未登录！！！</h1>
<el-link type="primary" @click="toMy">个人中心</el-link>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
toMy() {
// 跳转到个人中心页面
this.$router.push("/pages/my");
},
},
};
</script>
个人中心
个人中心读取store状态信息，点击退出按钮会清除cookie数据并且会清楚store中的数据然后跳转到登录页。
<template>
<div>
<div>个人中心</div>
<br /><br />
<el-form :inline="true" class="demo-form-inline">
<el-avatar :size="50" :src="$store.state.user.avater"></el-avatar
><br /><br />
<el-form-item label="账号">
<el-input
:value="$store.state.user.username"
placeholder="账号"
:disabled="true"
></el-input> </el-form-item
><br />
<el-form-item label="性别">
<el-input
:value="$store.state.user.sex"
placeholder="性别"
:disabled="true"
></el-input> </el-form-item
><br />
<el-form-item>
<el-button type="primary" @click="open">退出登录</el-button>
</el-form-item>
</el-form>
<div></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
logout() {
// 调用用户状态管理的清空信息方法。
this.$store.commit("logout");
// 清除掉用户在cookie中存储的信息
this.$cookies.remove("user_cookie");
},
open() {
this.$confirm("即将退出登录, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.logout();
this.$message({
type: "success",
message: "退出成功!",
});
this.$router.push("/pages/login");
})
.catch(() => {
this.$message({
type: "info",
message: "已取消退出",
});
});
},
},
};
</script>