關于 Vue.js 登錄跳轉的問題

<template>

  <div class="p-grid login">

    <div class="p-col-3">

      <div class="card card-w-title">

        <h1 style="text-align: center">登錄</h1>

        <div>

          <div class="p-col-12">

            <div class="p-inputgroup">

              <span class="p-inputgroup-addon">

                <i class="pi pi-user" />

              </span>

              <InputText v-model="userInfo.userName" placeholder="用戶名" />

            </div>

          </div>

          <div class="p-col-12">

            <div class="p-inputgroup">

              <span class="p-inputgroup-addon">

                <i class="pi pi-lock" />

              </span>

              <Password v-model="userInfo.password" placeholder="密碼"></Password>

            </div>

          </div>

          <div class="p-col-12" style="text-align: center">

            <Button @click="onLogin" label="登錄" style="margin-bottom: 10px" />

          </div>

        </div>

      </div>

    </div>

  </div>

</template>







<script>

import AccountService from "../services/accountService";



export default {

  name: "Login",

  accountService: null,

  data() {

    return {

      userInfo: {

        userName: null,

        password: null

      }

    };

  },

  created() {

    this.accountService = new AccountService();

  },

  mounted() {},

  methods: {

    onLogin: function() {

      this.userInfo.password = this.$Md5(this.userInfo.password);

      this.accountService.login(this.userInfo).then(data => {

        this.$Cookie.set("cese2_u", data, { expires: 1 });

      });

    }

  }

};

</script>



<style scoped>

.login {

  display: flex;

  justify-content: center;

}

</style>>

 

import Vue from 'vue'

import Login from './views/Login.vue'

//import App from './App.vue'



Vue.config.productionTip = false;



import InputText from "primevue/inputtext"

Vue.component('InputText', InputText);

import Password from "primevue/password"

Vue.component("Password", Password)

import Button from "primevue/button"

Vue.component("Button", Button)

import Column from "primevue/column"

Vue.component("Column", Column)

import DataTable from "primevue/datatable"

Vue.component("DataTable", DataTable)

import Dialog from "primevue/dialog"

Vue.component("Dialog", Dialog)

import Textarea from "primevue/textarea"

Vue.component("Textarea", Textarea)

import Dropdown from 'primevue/dropdown';

Vue.component("Dropdown", Dropdown)

import RadioButton from 'primevue/radiobutton';

Vue.component("RadioButton", RadioButton)

import InputMask from "primevue/inputmask";

Vue.component("InputMask", InputMask);

import InputNumber from "primevue/inputnumber";

Vue.component("InputNumber", InputNumber);







//匯入樣式表

import 'primevue/resources/themes/nova-accent/theme.css';

import 'primevue/resources/primevue.min.css';

import 'primeflex/primeflex.css';

import 'primeicons/primeicons.css';

import 'prismjs/themes/prism-coy.css';

// import '@fullcalendar/core/main.min.css';

// import '@fullcalendar/daygrid/main.min.css';

// import '@fullcalendar/timegrid/main.min.css';

import './assets/layout/layout.scss';



//匯入路由

import router from "./router.js"

Vue.prototype.$Router = router;



//匯入MD5

import Md5 from "js-md5";

Vue.prototype.$Md5 = Md5;



//匯入 Cookie

import Cookie from "js-cookie";

Vue.prototype.$Cookie = Cookie;



import axios from 'axios'

if (process.env.NODE_ENV == 'development') {

  console.log("開發版本")

  //設定 API基礎地址

  axios.defaults.baseURL = "https://localhost:5001/api";

} else if (process.env.NODE_ENV == 'production') {

  console.log("上線版本");

  //設定 API基礎地址

  Vue.prototype.$apiUrl = "https://localhost:5001/api";

}



//http 攔截器

axios.interceptors.response.use(

  res => {

    //對回應資料做些事

    if (this.Cookie.get("cese2_u") === null) {  // 這里根據自己介面回傳狀態進行判斷是否需要登錄

      console.log("未登錄")

      router.push({

        path: '/login',

        query: {

          redirect: location.hostname  // 防止從外部進來登錄

        }

      })

    }

    else {

      console.log("已登錄：" + this.Cookie.get("cese2_u"));

    }

    return res.data;

  },

  error => {

    let errorInfo = error.data.error ? error.data.error.message : error.data;

    return Promise.reject(errorInfo);

  }

);



//路由 login 跳轉

// 路由判斷登錄 根據路由組態檔的引數

router.beforeEach((to, from, next) => {

  if (to.matched.some(record => record.meta.requireAuth)) { // 判斷該路由是否需要登錄權限

    console.log('需要登錄');

    //if (localStorage.token) { // 判斷當前的token是否存在 ； 登錄存入的token

    let s = true;

    if (s) {

      next();

    }

    else {

      next({

        path: '/',

        query: { redirect: to.fullPath } // 將跳轉的路由path作為引數，登錄成功后跳轉到該路由

      })

    }

  }

  else {

    next();

  }

});





new Vue({

  router, //掛載路由

  render: h => h(Login),

}).$mount('#app')

uj5u.com熱心網友回復：

標籤：C#

上一篇：VB.NET 更新ACCESS表后，第一時間查詢記錄數，回傳總是零，但打開表有記錄；

下一篇：求解 尚未為此請求呼叫 ISessionIDManager.InitializeRequest。