Vue.js 前端登录验证实现笔记
Vue.js 前端登录验证实现笔记
不良少年王孑然 发表于7个月前
Vue.js 前端登录验证实现笔记
  • 发表于 7个月前
  • 阅读 166
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

项目需要实现的是路由渲染和权限控制。

入口文件

// Main.jsx

import Vue from 'vue'
import resource from 'vue-resource'
import store from './store.jsx'
import router from './router.jsx'

router.beforeEach((to, from, next) => {
    // 设置网站标题
    document.title = to.meta.title !== undefined ? to.meta.title : ""

    // 验证 Token 是否正确
    store.dispatch('verifyToken').then((state) => {
        if (to.meta.requestedAuthenticated){
            if (!store.getters.checkAuthorization){
                next({
                    path: "/login"
                })
            }
        }
    }, err => {})

    next()
});

//...

 Vuex 的 Actions

// store/actions.jsx

import Vue from 'vue' // 需要用到 vue-resource 插件

export default {
    //...
    verifyToken({ commit, state }) {
        // Check token...
        return new Promise((resolve, reject) => {
            Vue.http.post('/users/checkToken', { token: localStorage.getItem('token')}).then((response) => {
                if (response.ok){
                    let data = response.data;

                    if (data.status == true){
                        commit("pushAuthenticated", true);
                        resolve(true);
                    } else {
                        reject();
                        commit("pushAuthenticated", false);
                    }
                }
            }, err => {
                console.log(err);
            });
        });
    }
    //...
}

Router

export default [
//...
    {
        path: "/",
        name: "home",
        meta: {
            requestedAuthenticated: true
        },
        component: require("../components/main.vue")
    }
//...
]

渲染组建

<!-- App.vue Component -->
<template>
    <div class="container-fluid" v-if="isAuthenticated">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
	computed: {
        isAuthenticated() {  // 这个方法主要是避免没有权限的页面进行渲染显示
            if (this.$store.state.route.meta.requestedAuthenticated){
                return this.$store.getters.checkAuthorization;
            }else {
                return true;
            }
        }
	}
}
</script>

完结。

共有 人打赏支持
粉丝 2
博文 1
码字总数 208
×
不良少年王孑然
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: