Nuxt 中的 vuex 及鉴权应用
部分关键代码
login.vue
<!-- 部分关键代码 -->
<script>
export default {
middleware: "login", // 使用 login 中间件
beforeCreate() {
this.form = this.$form.createForm(this, { name: "normal_login" });
},
methods: {
handleSubmit(e) {
e.preventDefault();
this.form.validateFields(async (err, values) => {
if (!err) {
// console.log('Received values of form: ', values);
const { userName, password } = values;
try {
const val = await this.$axios.post("/login", {
userName,
password
});
this.$message.success(val.msg);
// 登录后更新 store
this.$store.commit("setUser", val.name);
this.$store.commit("setLogin", true);
// 登录成功后跳转页面
const url = this.$route.query.url || "/home";
this.$router.push(url);
} catch (error) {
this.$message.error(error.msg);
}
}
});
}
}
};
</script>
服务端代码
const express = require('express');
const server = express();
server.use(express.json());
server.post('/login', async (req, res) => {
try {
const { userName, password } = req.body;
if (userName == 'root' && password == '123123') {
// 登录成功后，设置 cookie
res.cookie('session', '123456');
res.cookie('username', '小丁');
res.json({ name: '小丁', msg: '登录成功', code: 200 });
} else {
res.json({ code: 400, msg: '用户名密码错误' });
}
} catch (error) {
console.log(error);
res.statusCode(500).send('服务器错误');
}
});
server.listen(8080, _ => console.log('server is running at 8080'));
访问 /about 界面
<template>
<h1>About页面</h1>
</template>
<script>
export default {
middleware: 'auth', // 会先走 auth 中间件
}
</script>
<style>
</style>
auth 中间件
export default function ({ store, redirect, route }) {
if (!store.state.user) {
// 未登录重定向到 登录界面
redirect({ path: '/login', query: { url: route.path } })
}
}
vuex 的 store
export const actions = {
// 该方法是在服务端执行的，如果 cookie 存在说明登录成功，更新 store
nuxtServerInit({ commit }, { req }) {
const cookie = req && req.headers.cookie;
const val = getCookie(cookie, 'session');
if (val) {
const user = getCookie(cookie, 'username');
commit('setUser', user);
commit('setLogin', true);
}
}
}
function getCookie(cookie, key) {
if (!cookie) {
return;
}
const cookies = cookie.split('; ');
for (var i = 0; i < cookies.length; i++) {
const c = cookies[i];
const [k, v] = c.split('=');
if (k == key) {
return v;
}
}
}
export const state = () => ({
user: null,
isLogin: false
});
export const mutations = {
setUser(state, user) {
state.user = user;
},
setLogin(state, b) {
state.isLogin = b;
}
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
SSR🤜 Nuxt 布局（SSR 框架）
上一篇
评论
