vue+element-ui+js-cookie+store实现登录功能

vue+element-ui+js-cookie+store实现登录功能


脚手架vue-cli3.*
vue+element-ui+js-cookie+store实现登录功能_第1张图片
vue+element-ui+js-cookie+store实现登录功能_第2张图片
在这里插入图片描述
login.vue







main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';
import router from './router';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store';
import axios from 'axios';

Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.prototype.$https = axios;
new Vue({
	router,
	store,
	render: h => h(App),
}).$mount('#app');

route.js


import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
import Login from './views/Login.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login,
      meta: {
        keepAlive: false,
        test:false,
      },
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        keepAlive: true,
        test:true,
        requireAuth:true,
      },
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {
        keepAlive: true,
        test:true,
        requireAuth:true,
      },
    },
  ],
});

store.js


import Vue from 'vue';
import Vuex from 'vuex';
import Cookies from 'js-cookie'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token:'' || Cookies.get('token'),
  },
  mutations: {
    settoken(state,data){
      state.token =data;
    }
  },
  actions: {
    commitsettoken:({commit},token)=>commit('settoken',token) 
  },
});

App.vue





你可能感兴趣的:(vue)