我正在使用 vuex 进行状态管理这是我的 vuex 代码,
这里我的逻辑是,如果令牌存在于本地存储中,那么它将设置 isAuthenticated 为 true,这样就可以很容易地检查路由。但是有些它是如何不起作用的。
import axios from "axios";
import router from "../../router";
const state = {
token: localStorage.getItem("tkn") || "",
isAuth: false,
};
const getters = {
isAuthenticated: (state) => !!state.token,
authStatus: (state) => state.isAuth,
};
const actions = {
login({ commit }, loginData) {
// commit('auth_request')
axios
.post("/api/adminuser/auth/login", loginData)
.then((resp) => {
console.log(resp);
localStorage.setItem("tkn", resp.data.token);
axios.defaults.headers.common["Authorization"] = resp.data.token;
commit("setToken", resp.data.token);
router.push("/");
})
.catch((err) => {
console.log(err);
commit("authError", err);
localStorage.removeItem("token");
});
},
};
const mutations = {
setToken: (state, token) => ((state.token = token), (state.isAuth = true)),
authError: (state) => (state.isAuth = false),
};
export default {
state,
getters,
actions,
mutations,
};
这是我的路由器代码
import Vue from "vue";
import VueRouter from "vue-router";
import auth from "../store/modules/auth.js";
Vue.use(VueRouter);
const routes = [
{
path: "/signin",
name: "signin",
component: () => import("../components/Authentication/Signin.vue"),
},
{
path: "/",
name: "dashboard",
component: () => import("../components/Dashboard/Dashboard.vue"),
meta: {
requiresAuth: true,
},
},
];
const router = new VueRouter({
mode: "history",
routes,
});
router.beforeEach((to, from, next) => {
if (to.name !== "signin" && auth.getters.isAuthenticated == false)
next({ name: "signin" });
else next();
});
export default router;
目前,如果我登录仍然可以进入登录页面,甚至可以在没有身份验证的情况下进入仪表板。