<template>
  <el-row type="flex" justify="center">
    <el-card v-if="isLogin">
      欢迎：admins
      <br>
      <br>
      <el-button type="primary" icon="el-icon-upload" @click="loginOut">退出登录</el-button>
    </el-card>
    <el-form v-else ref="loginForm" :model="user" :rules="rules" status-icon label-width="50px">
      <el-form-item label="账号" prop="name">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model="user.pass" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-upload" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>
 
<script>
  import Vue from "vue";
  export default {
      methods: {
        login: function() {
          let that = this;
          that.$store.commit("saveToken", "");
          this.$refs.loginForm.validate(valid => {
            if (valid) {
             //发送请求登陆，这里要注意下返回数据格式，如果有问题，参考 http.js 中的 response 设置
              Vue.http.get("Login/GetTokenNuxt?name="+that.user.name+"&pass="+that.user.name+"").then(res => {
                if (res.success) {
                    console.log("登陆成功");
                    var token = res.token;
                    that.$store.commit("saveToken", token);
                    this.$notify({
                      type: "success",
                      message: "欢迎你," + this.user.name + "!",
                      duration: 3000
                    });
                  this.$router.replace("/");
                }
              }).catch(err => {
                console.log("点赞失败", err);
              });
            } else {
              return false;
            }
          });
        },
        loginOut(){
          this.isLogin=false;
          this.$store.commit("saveToken", "");
        }
      },
      data() {
        return {
          isLogin:false,
          user: {},
          rules: {
            name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
            pass: [{ required: true, message: "密码不能为空", trigger: "blur" }]
          }
        };
      },
      created() {
      }
    }
</script>

npm i element-ui -S

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

//这个是 server_site 服务端插件全部
import Vue from "vue";
import http from "./http.js";
import "./ElementUI.js";//导入 elementUI插件
 
const install = function (VueClass, opts = {}) {
    // http method
    VueClass.http = http;
    VueClass.prototype.$http = http;
};
Vue.use(install);

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = () => new Vuex.Store({
    state: {
      isLogined: false,
      token: "",//这里主要是用到了 token
      userInfo: {
            name: ""
        },
        loginBoxVisible: false
    },
    mutations: {
      //保存 token 到 store和本地中
      saveToken(state, data) {
        state.token = data;
        window.localStorage.setItem("Token", data);
      },
        changeLoginState (state, isLogined) {
            state.isLogined = isLogined;
        },
        changeLoginBoxVisible (state, visible) {
            state.loginBoxVisible = visible;
        },
        updateUserInfo (state, userInfo) {
            state.userInfo = userInfo;
        }
    },
    actions: {
        initUser ({ state, commit }) {
            const user = JSON.parse(localStorage.getItem("userInfo"));
            if (user) {
                state.userInfo = user;
                commit("changeLoginState", true);
            }
        }
    }
});
export default store;

<script>
  import Vue from "vue";
  export default {
    layout: "blog",
    async asyncData ({ params, error }) {
      // 获取文章详情
      let data = {};
      try {
        data = await Vue.http.get(`blog/${params.id}`);
        return {
          data: data
        };
      } catch (e) {
        //error({ statusCode: 404, message: "出错啦" });
      }
    },
//在这里进行判断 token
    fetch ({ store, redirect  }) {
      if (!(store.state.token&&store.state.token.length>=128)) {
      //跳转登录页
        return redirect('/login')
      }
    },
    data () {
      return {
        comments: []
      };
    },
    head () {
      return {
        title: `${this.data.btitle}`,
        meta: [
          {
            name: "description",
            content: this.data.btitle
          }
        ]
      };
    }
  };
</script>

// http.interceptors.request.use((data, headers) => {
  //     return data;
  // });
 //http request 拦截器
  http.interceptors.request.use(
    config => {
//注意，首次服务端渲染的时候，还没有出现 DOM，所以找不到 windows 对象，这里用 try 处理掉了
      try {
        if (window.localStorage.Token&&window.localStorage.Token.length>=128) {//store.state.token 获取不到值
          config.headers.Authorization = window.localStorage.Token;
        }
      }catch (e) {
      }
      return config;
    },
    err => {
      return Promise.reject(err);
    }
  );