首页 > 技术文章 > vuex store index.js配置登录

knuzy 2019-08-18 23:40 原文

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
// 初始化时用sessionStore.getItem('token'),这样子刷新页面就无需重新登录
const state = {
	user: window.sessionStorage.getItem('user'),
    token: window.sessionStorage.getItem('token'),
	btns:window.sessionStorage.getItem('btns'),
	identity: window.sessionStorage.getItem('identity')
};
const mutations = {
	//将token保存到sessionStorage里,token表示登陆状态
	SET_TOKEN: (state, data) => {
		state.token = data;
		window.sessionStorage.setItem('token', data);
	},
	//获取用户名
	GET_USER: (state, data) => {
		// 把用户名存起来
		state.user = data;
		window.sessionStorage.setItem('user', data);
	},
	BTNS: (state, data) => {
		state.btns = data;
		window.sessionStorage.setItem('btns', data);
	},
	//登出
	LOGOUT: state => {
		// 登出的时候要清除token
		state.token = null;
		state.user = null;
		window.sessionStorage.removeItem('token');
		window.sessionStorage.removeItem('user');
	},
	//获取用户名
	IDEN: (state, data) => {
		// 把用户名存起来
		state.identity = data;
		window.sessionStorage.setItem('identity', data);
	},
};

const actions = {};
export default new Vuex.Store({
	state,
	mutations,
	actions,
});

// router index.js登录拦截

// 注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
  const token = store.state.token
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (token) { // 通过vuex state获取当前的token是否存在
      next()
    } else {
      console.log('该页面需要登陆')
      next({
        path: '/login'
        // query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  } else {
    next()
  }
})
export default router

推荐阅读