实现token登录

src/api/public.js

@@ -14,6 +14,17 @@ export function login(data) {
   })
 }
 
+// 登录方法
+export function tokenLogin(token) {
+  return request({
+    url: `/auth/tokenlogin?token=${token}&loginType=0`,
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+  })
+}
+
 // 注册方法
 export function register(data) {
   return request({

src/router/index.js

@@ -27,7 +27,8 @@ Router.prototype.replace = function push(location, onResolve, onReject) {
 // 路由守卫
 router.beforeEach((to, from, next) => {
   console.log('从'+from.path+'跳向'+to.path)
-  if( to.path === '/login') return next();
+  if( to.path === '/login' || to.path==='/tokenlogin') return next();
+
   let token = sessionStorage.getItem('access_token');
   if(!token) return next('/login');
   next()

src/router/router.config.js

@@ -16,6 +16,14 @@ export let routers = [
     },
   },
   {
+    path: '/tokenlogin',
+    component: () => import('@/views/tokenlogin'),
+    meta: {
+      title: '登录',
+      keepAlive: false
+    },
+  },
+  {
     path: '/consultInfo/:id',
     name: 'consultInfo',
     component: () => import('@/views/menu/monitoringCall/components/consultInfo'),

src/views/tokenlogin.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="login">
+    <div>
+      <div class="avatar-box">
+        <van-loading text-color="#0094ff" v-if="loading">正在跳转</van-loading>
+        <span style="color: red" v-if="type == 'error'">{{ message }}</span>
+        <span style="color: #E6A23C" v-if="type == 'warn'">{{ message }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 请求接口
+import { tokenLogin } from '@/api/public.js'
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      loading: false,
+      type: '',
+      message: ''
+    }
+  },
+  computed: {
+    ...mapGetters(['userName'])
+  },
+  mounted() {
+    this.loading = true
+    let { query } = this.$route;
+    if (!query) {
+      this.loading = false
+      this.type = 'error'
+      this.message = '缺少token'
+    } else {
+      let { token } = query
+      if (!token) {
+        this.type = 'warn'
+        this.loading = false
+        this.message = '缺少token'
+      } else {
+        tokenLogin(token)
+          .then(res => {
+            console.log(res, 'res')
+            sessionStorage.setItem('access_token',res.data.access_token);
+            this.$router.replace('/home');
+          })
+          .catch(e => {
+            this.type = 'error'
+            this.message = '请求错误'
+            this.loading = false
+          })
+      }
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss">
+//.van-cell__title{
+//  align-items: center;
+//}
+//.custom-title{
+//  align-self: center;
+//}
+</style>
+<style scoped lang="scss">
+.login {
+  height: 100vh;
+  background: url('../assets/img/login-background.png') top left no-repeat #edfcff;
+  background-size: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > div {
+    width: 450px;
+    padding: 30px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 10px;
+    .avatar-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 150px;
+    }
+  }
+  h2 {
+    letter-spacing: 10px;
+    text-align: center;
+  }
+  .custom-title {
+    align-self: center;
+    vertical-align: middle;
+  }
+}
+</style>