vue中实现全局的setCookie,getCookie以及delCookie方法笔记
代码如下,后面还会修改import Vue from 'vue'import Vuex from 'vuex'import VueRouter from 'vue-router'import App from '../component/App.vue'import Login from '../component/Login.vue'import UserInfo from '../...
·
代码如下,后面还会修改
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import App from '../component/App.vue'
import Login from '../component/Login.vue'
import UserInfo from '../component/UserInfo.vue'
//状态管理
Vue.use(Vuex)
//路由
Vue.use(VueRouter)
//路由配置
//如果需要加菜单,就在这里添加路由,并在UserMenu.vue添加入口router-link
const router = new VueRouter({
routes: [{
path: '/login',
component: Login
}, {
path: '/user_info',
component: UserInfo
}]
})
//Vuex配置
const store = new Vuex.Store({
state: {
domain:'http://test.example.com', //保存后台请求的地址,修改时方便(比方说从测试服改成正式服域名)
userInfo: { //保存用户信息
nick: null,
ulevel: null,
uid: null,
portrait: null
}
},
mutations: {
//更新用户信息
updateUserInfo(state, newUserInfo) {
state.userInfo = newUserInfo;
}
}
})
//设置cookie,增加到vue实例方便全局调用
Vue.prototype.setCookie = (c_name, value, expiredays) => {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}
//获取cookie
Vue.prototype.getCookie = (name) => {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//删除cookie
Vue.prototype.delCookie =(name) => {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = this.getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
//vue实例
var app = new Vue({
data: {},
el: '#app',
render: h => h(App),
router,
store,
watch:{
"$route" : 'checkLogin'
},
created() {
this.checkLogin();
},
methods:{
checkLogin(){
//检查是否存在session
if(!this.getCookie('session')){
this.$router.push('/login');
}else{
this.$router.push('/user_info');
}
}
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)